Handlebars是一款很高效的模版引擎,提供语意化的模版语句,最大的兼容Mustache模版引擎, 提供最大的Mustache模版引擎兼容, 无需学习新语法即可使用; Handlebars.js和Mustache 的 区别 目前版本为 2.0.0 , 无压缩的情况下目测是 3000 行源代码,约 200kb ; 下面这个是基本的模版表达式, 其中 {{ 和 }} 之间为handlerbars的变量; <div class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}} </div> </div>查看更多表达式的用法
把数据放到自己定义的 <script id="entry-template" type="text/x-handlebars-template"> template content </script> 编译模版
使用 var source = $("#entry-template").html(); var template = Handlebars.compile(source); 智能编译模版(在移动端也能运行哦么么哒) 更多有关预编译的链接(Precompilation)生成html代码通过上面的模版和数据混合编译后的结果: var context = {title: "标题", body: "我是字符串!"} var html = template(context); JS生成的结果如下: <div class="entry"> <h1>标题</h1> <div class="body"> 我是字符串! </div> </div>更多template选项 //代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> </head> <body> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://cdn./libs/handlebars.js/2.0.0/handlebars.js"></script> <div id="div1"></div> <script id="entry-template" type="text/x-handlebars-template"> <div class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}} </div> </div> </script> <script> //JS代码 var source = $("#entry-template").html(); var template = Handlebars.compile(source); var context = {title: "标题", body: "我是字符串!"} var html = template(context); document.getElementById("div1").innerHTML = html; </script> </body> </html> //模版的代码和JS的代码如防止HTML被转义的方法; {{ }}和 {{{}}}和区别就是, 如果你不希望变量里面的字符串被转义就使用{{{ }}}对变量进行处理; <div class="entry"> <h1>{{title}}</h1> <div class="body"> {{{body}}} </div> </div> 数据如下: { title: "All about <p> Tags", body: "<p>This is a post about <p> tags</p>" } 定义的Helper如下 Handlebars.registerHelper('link', function(text, url) { text = Handlebars.Utils.escapeExpression(text); url = Handlebars.Utils.escapeExpression(url); var result = '<a href="' + url + '">' + text + '</a>'; return new Handlebars.SafeString(result); }); 渲染以后的结果如下: <div class="entry"> <h1>All About <p> Tags</h1> <div class="body"> <p>This is a post about <p> tags</p> </div> </div> //代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> </head> <body> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://cdn./libs/handlebars.js/2.0.0/handlebars.js"></script> <div id="div2"></div> <script id="entry-template1" type="text/x-handlebars-template"> <div class="entry"> <h1>{{title}}</h1> <div class="body"> {{{body}}} </div> </div> </script> <script> Handlebars.registerHelper('link', function(text, url) { text = Handlebars.Utils.escapeExpression(text); url = Handlebars.Utils.escapeExpression(url); var result = '<a href="' + url + '">' + text + '</a>'; return new Handlebars.SafeString(result); }); var source = $("#entry-template1").html(); var template = Handlebars.compile(source); var context = { title: "All about <p> Tags", body: "<p>This is a post about <p> tags</p>" }; var html = template(context); document.getElementById("div2").innerHTML = html; </script> </body> </html> Handlerbars的自定义表达式块表达式允许你定义 helpers 生成自定义的HTML,下面这个是JS的模版; {{#list people}}{{firstName}} {{lastName}}{{/list}} 如果你使用下面的数据: { people: [ {firstName: "Yehuda", lastName: "Katz"}, {firstName: "Carl", lastName: "Lerche"}, {firstName: "Alan", lastName: "Johnson"} ] } 在JS里面定义这个helper; Handlebars.registerHelper('list', function(items, options) { var out = "<ul>"; for(var i=0, l=items.length; i<l; i++) { out = out + "<li>" + options.fn(items[i]) + "</li> " ; /*options.fn相当于一个编译的函数*/ } return out + "</ul>"; }); 执行以后的结果是: <ul> <li>Yehuda Katz</li> <li>Carl Lerche</li> <li>Alan Johnson</li> </ul> 自定义块表达式还有很多别的特性, 比如可以直接使用 IF 和 ELSE; Learn More: Block Helpers//代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> </head> <body> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://cdn./libs/handlebars.js/2.0.0/handlebars.js"></script> <div id="div3"></div> <script id="entry-template2" type="text/x-handlebars-template"> {{! 这个是模版的注释 }} {{#list people}}{{firstName}} {{lastName}}{{/list}} </script> <script> Handlebars.registerHelper('list', function(items, options) { var out = "<ul>"; for(var i=0, l=items.length; i<l; i++) { out = out + "<li>" + options.fn(items[i]) + "</li> " ; /*options.fn相当于一个编译的函数*/ } return out + "</ul>"; }); var source = $("#entry-template2").html(); var template = Handlebars.compile(source); var context = { people: [ {firstName: "Yehuda", lastName: "Katz"}, {firstName: "Carl", lastName: "Lerche"}, {firstName: "Alan", lastName: "Johnson"} ] }; var html = template(context); document.getElementById("div3").innerHTML = html; </script> </body> </html> Handlebars次级数据的渲染Handlebars支持简单的下级对象获取和上级对象获取, 跟 Mustache一样样的. <p>{{name}}</p> Handlebars 也支持多层次的数据展示, 模版如下. <div class="entry"> <h1>{{title}}</h1> <h2>By {{author.name}}</h2> <div class="body"> {{body}} </div> </div> 下面这个是要使用到的Handlebars的 数据 ; var context = { title: "My First Blog Post!", author: { id: 47, name: "Yehuda Katz" }, body: "My first post. Wheeeee!" }; 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> </head> <body> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://cdn./libs/handlebars.js/2.0.0/handlebars.js"></script> <div id="div4"> </div> <script id="entry-template3" type="text/x-handlebars-template"> <div class="entry"> <h1>{{title}}</h1> <h2>By {{author.name}}</h2> <div class="body"> {{body}} </div> </div> </script> <script> var source = $("#entry-template3").html(); var template = Handlebars.compile(source); var context = { title: "My First Blog Post!", author: { id: 47, name: "Yehuda Katz" }, body: "My first post. Wheeeee!" }; var html = template(context); document.getElementById("div4").innerHTML = html; </script> </body> </html> Handlebars 可以迭代Object对象(纯对象或者数组); 在模版中的../是对象的父级; <h1>Comments</h1> <div id="comments"> {{#each comments}} <h2><a href="/posts/{{../permalink}}#{{id}}">{{title}}</a></h2> <div>{{body}}</div> {{/each}} </div> 下面展示的name都是同样的东西; <p>{{./name}} or {{this/name}} or {{this.name}}</p>
Handlebars模版中的注释可以使用
|
|
来自: 日月桃子 > 《Handlebars》