码迷,mamicode.com
首页 > Web开发 > 详细

handlebar.js使用

时间:2015-05-07 00:27:04      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:

官方网站: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>会显示出来。

 另外还有,引用块模板等以后补充

handlebar.js使用

标签:

原文地址:http://www.cnblogs.com/dongcheck/p/4483542.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!