[前端]JavaScript语义模板库,模板引擎-Handlebars.js

目录

1 基本语法-快速入门

2 其他使用规范

1)内置helper

2)自定义helper block

2) handlebar path(路径识别)

---

    Handlebars是基于JavaScript的view和data的分离来快速构建Web模板的引擎,在加载时被预编译.

1 基本语法-快速入门

    {{value}},双括号是handlebars的基本语法.快速入门案例如下:

<!-- 1.通过script标签传递html template -->
<script id="entry-template" type="text/x-handlebars-template">
    <div class="entry">
        <h1>{{title}}</h1>
        <div class="body">
            {{body}}
        </div>
    <div>
</script>

//2.在javascript中使用Handlebars.compile编译template
var source = document.getElementById("#entry-template").innerHtml;
var template = Handlebars.compile(source);

//3.给template赋值
var context = {title:"My new Post",body:"This is my first post"};
var html = template(context);

<!-- 4.渲染结果 -->
<div>
    <h1 class="entry">My new Post</h1>
    <div class="body">
        This is my first post
    </div>
</div>

2 其他使用规范

1)内置helper

    handlebars有许多内置helper,例如each,if等.  这里就简单使用each来做个内置helper的示例.

如果想了解更多,可以访问http://handlebarsjs.com/builtin_helpers.html了解

//1.数据源
var context = {
    people:["Perry","Alan","Charles"]
};

<!-- 2.内置helper-each使用及渲染 -->
<!-- 在each内,使用this来指向遍历出来的element -->
<ul class="people_list">
  {{#each people}}
    <li>{{this}}</li>
  {{/each}}
</ul>

<!-- 3.渲染结果 -->
<ul class="people_list">
  <li>Perry</li>
  <li>Alan</li>
  <li>Charles</li>
</ul>

 

2)自定义helper block

    helper定义可以帮助我们通过handlebars按照一定的规则处理已有的数据源,渲染在html上.

    简单helper和块级helper的区别:1,简单helper的使用不带#,而块级helper使用带#; 2,简单helper的方法定义上不使用options,而块级helper上会使用options参数

#1 简单helper

//1.数据源,通过列表方式渲染在html上
var context = {
  author: {firstName: "Alan", lastName: "Johnson"},
  body: "I Love Handlebars",
  comments: [{
    author: {firstName: "Yehuda", lastName: "Katz"},
    body: "Me too!"
  }]
};

//2.自定义helper
Handlebars.registerHelper('fullName', function(person) {
  return person.firstName + " " + person.lastName;
});

<!-- 3.template使用及渲染 -->
<div class="post">
  <h1>By {{fullName author}}</h1>
  <div class="body">{{body}}</div>

  {{#each comments}}
  <h2>By {{fullName author}}</h2>
  <div class="body">{{body}}</div>
  {{/each}}
</div>

<!-- 4.template渲染结果 -->
<div class="post">
  <h1>By Alan Johnson</h1>
  <div class="body">I Love Handlebars</div>

  <h2>By Yehuda Katz</h2>
  <div class="body">Me Too!</div>
</div>

#2 块级helper

//1.数据源,通过列表方式渲染在html上
{
    people:[
        {firstName: "Yehuda", lastName: "Katz"},
        {firstName: "Carl", lastName: "Lerche"},
        {firstName: "Alan", lastName: "Johnson"}
    ]
}

//2.自定义block helper(块级helper)
Handlebars.registerHelper('list',function(items,options){
    var out = "<ul>";
    for(var i = 0;i<items.length,i++){\
        out += "<li>" +options.fn(items[i])"</li>";
    
    }
    return out + "</ul>";    
})

<!-- 3.template使用及渲染 -->
{{#list people}}
    {{firstName}} {{lastName}}
{{/list}}


<!-- 4.渲染结果 -->
<ul>
  <li>Yehuda Katz</li>
  <li>Carl Lerche</li>
  <li>Alan Johnson</li>
</ul>

2) handlebar path(路径识别)

<!-- 1.最常规的值渲染,单层路径 -->
{{title}} <!-- {{value}}模式 -->

<!-- 2.常规的值渲染,多层路径 支持识别渲染 -->
{{author.name}} <!-- {{parentValue.value}}模式 -->

<!-- 3.值渲染,路径支持/写法(相对路径) 支持识别渲染 -->
{{../name}} 
<div id="comments">
  <h2><a href="/posts/{{../permalink}}#{{id}}">{{title}}</a></h2>
</div>

// #数据源提供
var context = {
  title: "My First Blog Post!",
  author: {
    id: 47,
    name: "Yehuda Katz"
  },
  body: "My first post. Wheeeee!"
};