Handlebars 学习总结

Handlebars的功能就是先创建一个页面的模板，然后在需要生成页面的时候调用模板往里填数据。这样的好处是对于复杂的页面来说可有有效的讲数据和逻辑分开，可以模块化的复用很多部分。

1. 可以在HTML代码中嵌入Handlebars代码例如：  //此处的{{title}}{{body}}相当于在此处打了个标签，在调用模板的是时候会向标签里填入内容。

<h1>{{title}}</h1>

<div class="body">

  {{body}}

</div>

2. 可以把一个template放在<script>代码中。

<script id = "entry-template" type = "text/x-handlebars-template">

  template content //此处就可以放1中的那段代码。

</script>

3. 编译一个template

var source = $("#entry-template").html;

var template = Handlebars.compile(source);

4.使用template 得到相应的HTML页面

var context = {title: "My New Post", body: "This is my first post ! "};

var html = template(context);

得到的结果就是 

<h1>My New Post</h1>

<div class="body">

  This is my first post !

</div>

*****HTML里的标签被替换掉了

5. 如果  不想Handlebars escape a value（就是保证替换的东西原封不动的替换） 就使用｛｛｛    例如{{{body}}},两个大括号会escape value。

还有一种方法也 不会 escape a value，就是使用 Handlebars.safeSting()方法。例如：

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); 

});

6. Block Expressions

用Handlebars.registerHelper();来生成一个block expressions

使用的时候用如下语法 ：

{{#list people}}

{{/list}}

7 Build-in Block Helpers

with

each

if

unless

8. 注释

在Handlebars的代码里，{{！****}}这样的注释不会输出。但是HTML的注释语法（<!--*****-->）会被当作文本输出。