handlebar.js使用
官方网站:http://handlebarsjs.com/ 下载及查看使用帮助,或者用百度cdn引用
一、定义模板
<script id="entry-template" type="text/x-handlebars-template"> <div class="entry"> <h2>{{title}}</h2> <div>{{body}}</div> </div> </script>
<script id="entry-template" type="text/x-handlebars-template"> </script>
中间就是要加载的模板样式,"{{}}"为模板加载的位置
二、替换模板内容
另用一个<script>标签书写
1 var source = $("#entry-template").html(); 2 var template = Handlebars.compile(source);
表示获取 #entry-template 的DOM ,即上段script引用的部分。在用handlebar.js的方法 Handlebars.compile()匹配“{{}}”中得内容
1 var context = {title: "My New Post", body: "This is my first post!"}; 2 var html = template(context);
context 对象用来定义模板内容
template方法用来加载context,实际上是对模板上对应context的字段替换。
最后输出
1 $("#main").html(html);
1.如需要在模板中添加新标签
var context = {title: "My New Post", body: "<p>This is my first post!</p>"};
则用"{{{}}}"方法,可以将标签添加到模板中,否则<p>会显示出来。
另外还有,引用块模板等以后补充
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。