关于handelbars.js模板引擎

2024-04-27 15:10:35

字体：大中小

来源：转载

供稿：网友

1.基于Mustache，可以在handelbars中导入Mustache模板。利用{{ 对象函数 }} 替换对象或者运行函数支持.点语法可以对象.title等属性值2.使用时，直接script标签引入handlebars.js文件。<scripttype="text/javascript"src="script/jquery.js"></script>2<scripttype="text/Javascript"src="script/handlebars-1.0.0.beta.6.js"></script>3.js 中使用handelbars.compile（）预编译模板：//用jquery获取模板vartpl = $("#tpl").html();//原生方法varsource =document.getElementById('#tpl').innerHTML;//预编译模板vartemplate = Handlebars.compile(source);//模拟json数据varcontext = {name:"zhaoshuai",content:"learn Handlebars"};//匹配json内容varhtml = template(context);//输入模板$(body).html(html);4.blocks表达式表达式的后面跟一个# 表示blocks{{ /表达式 }} 结束blocks（如果当前表达式是数组则handelbars会展开数组。并将blocks的上下文设为数组元素）比如：<ul>{{#PRogramme}}<li>{{language}}</li>{{/programme}}</ul>对应json数据：{programme: [{language: "JavaScript"},{language: "HTML"},{language: "CSS"}]}渲染后:<ul><li>JavaScript</li><li>HTML</li><li>CSS</li></ul>5. Handelbars内置表达式（Block helper）each：利用{{#each name}}来遍历列表快内容，用this来引用遍历的元素，指数组里的每一个元素。 name 是数组。<ul>{{#each name}}<li>{{this}}</li>{{/each}}</ul>对应json是： {name: ["html","css","javascript"]};编译后：<ul><li>JavaScript</li><li>HTML</li><li>CSS</li></ul>if else 指定条件渲染dom；如果 {{ #if list }}，即if后的参数存在，则渲染{{ #else }}后面的语句；否则将不会渲染都dom，将执行{{ else }}后的error语句；{{#iflist}}<ul id="list">{{#eachlist}}<li>{{this}}</li>{{/each}}</ul>{{else}}<p>{{error}}</p>{{/if}}对应的json：vardata = {info:['HTML5','CSS3',"WebGL"],"error":"数据取出错误"}unless{{ #unless }}反向的一个if语句；unless后的参数不存在为false时，渲染dom；{{#unless data}}<ulid="list">{{#each list}}<li>{{this}}</li>{{/each}}</ul>{{else}}<p>{{error}}</p>{{/unless}}with {{#with}}一般情况下，Handlebars模板会在编译的阶段的时候进行context传递和赋值。使用with的方法，我们可以将context转移到数据的一个section里面（如果你的数据包含section）。这个方法在操作复杂的template时候非常有用。<divclass="entry"><h1>{{title}}</h1>{{#withauthor}}<h2>By {{firstName}} {{lastName}}</h2>{{/with}}</div>对应json数据：{title:"My first post!",author: {firstName:"Charles",lastName:"Jolley"}}6. handlebar的注释（comments）写法：{{! handlebars comments }}7. handlebar的访问（path）可以通过 . 语法访问子属性；也可以通过 ../ 来访问父级属性。h1>{{author.id}}</h1>{{#withperson}}<h1>{{../company.name}}</h1>{{/with}}8. 自定义helper用Handlebars.registerHelper ( )方法来注册一个helper9. handelbars的jquery插件(function($) {varcompiled = {};$.fn.handlebars=function(template,data){if(templateinstanceofjQuery) {template = $(template).html();}compiled[template] = Handlebars.compile(template);this.html(compiled[template](data));};})(jQuery);$('#content').handlebars($('#template'),{name:"Alan"});

上一篇：关于启动vue+node.js项目报错的解决

下一篇：JavaScript 自己封装的Set