让我明白又糊涂的handlebars（二）

6月25日，寻游json挖下的坑

---

心中潜藏的固执终于爆发，因为开始于杨元的博客，固执于每一次渲染开始于循环、结束于循环。进入了一个关于json格式的死循环，还不愿意醒，重复自己模拟json、取json，但是就是不愿意在自己得到的json中去直接查找直接渲染。真是执着于一个不怎么好的实现，还沾沾自喜，认为自己发现了无人的小角落，殊不知是一个路旁的可见底的涵洞，探之无味。

handlebars函数方法

---

前一章对handlebars使用的一些思想进行了介绍，这里是承接它对handlebars的使用进行一些补充，不能保证全面，但是我会坚持不断发现，不断补充，完善handlebars的使用。

• handlebars大的使用前奏-三点

1. 引用库

<script src="jquery/jquery.js"></script>
<script src="handlebars/handlebars-v3.0.1.js"></script>

2. 页面数据渲染与实现

<script id ="table-template" type="text/x-handlebars-template">
{{data}}
</script>

3. 相应js获取json并渲染（一般使用ajax）

 <script src="handle.js"></script>

var data = {"data":"data"};
var myTemplate = Handlebars.compile($("#table-template").html());
$('body').html(myTemplate(data));
//这里利用jquery实现对handlebars的编译与页面的实现
var source = "<p>Hello, my name is {{name}}. I am from {{hometown}}. I have " + 
"{{kids.length}} kids:</p>" + 
"<ul>{{#kids}}<li>{{name}} is {{age}}</li>{{/kids}}</ul>"; 
var template = Handlebars.compile(source); 
var data = { "name": "Alan", "hometown": "Somewhere, TX", 
"kids": [{"name": "Jimmy", "age": "12"}, {"name": "Sally", "age": "4"}]}; 
var result = template(data);

• handlebars正式使用的语句

1. 注释
   不能使用其他的注释方法：// /**/等，在handlebars都会报错，只能用

{{! 这是一个注释}}
{{!-- 一起消失吧--}}

2. handlebars表达式
   很多时候，我们只需要从后台获取数据，然后将数据放在对应页面中，那么就会存在循环、判断等情况，但是通过前面的直接进入数据是不行的，所以我们就有了Block表达式，对某些事情进行更深入的操作。
   一般形式为：{{# blockdemo}}开始到{{/blockdemo}}结束。通过一些逻辑操作来进行block的定义与使用。
3. handlebars的内置块表达式（Block helper）

• each block helper === 即循环，遍历出列表内容，用this来引用遍历的元素

<ul> 
     {{#each name}} 
     <li>{{this}}</li> 
     {{/each}}
</ul> 

对应的json

    { name: ["html","css","javascript"]};

• if else block helper == 即if/else语句
  使用{{#if}}、{{#else}} {{/if}}等进行渲染，如：

{{#if list}}
<ul id="list">
     {{#each list}} 
    <li>{{this}}</li>
     {{/each}}
</ul> 
{{else}} 
   <p>{{error}}</p>
{{/if}}

var data = {
           info:['HTML5','CSS3',"WebGL"], 
           "error":"数据取出错误"
}

• unless block helper== 与if相反使用即可，如：

{{#unless data}}
<ul id="list"> 
    {{#each list}} 
      <li>{{this}}</li>
     {{/each}}
</ul>
 {{else}} 
    <p>{{error}}</p>
{{/unless}}

• with block helper == 会在编译的阶段的时候进行context传递和赋值,用with我们可以很简单的进入一个数据集合里面，查找对应的数据很方便，如：

<div class="entry">
     <h1>{{title}}</h1> 
      {{#with author}}
      <h2>By {{firstName}} {{lastName}}</h2>  
       {{/with}}
  </div> 

{ 
  title: "My first post!",
  author: {
     firstName: "Charles",
     lastName: "Jolley"
     }
}

4. handlebars自定义标签
   handlebars的自定义标签可以使用在Handlebars模板的任何地方，必须使用Handlebars.registerHelper即注册helper，用一个简单的例子来讲解：

Handlebars.registerHelper('fullName', function(person) {
 return person.firstName + " " + person.lastName;});

使用情景：

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

数据：

var context = { 
    author: {
            firstName: "Alan", 
            lastName: "Johnson"}, 
            body: "I Love Handlebars", 
            comments: [{ 
                author: {
                       firstName: "Yehuda", 
                       lastName: "Katz"}, 
                        body: "Me too!" 
                }
     ]};

结果：

<div class="post"> 
      <h1>By Alan Johnson</h1> 
      <div class="body">I Love Handlebars</div> 
      <h1>Comments</h1> 
      <h2>By Yehuda Katz</h2> 
      <div class="body">Me Too!</div>
</div>

注：在自定义标签的helper中可以使用this，this是当前的对象。

5. handlebars访问路径（Path）
   handlebars支持路径，可以使用嵌套的路径，能够查找嵌套低于当前上下文的属性：

.    访问属性
../  访问父属性

如：

{
    title: "My First Blog Post!",
    author: { 
        id: 47, 
        name: "Yehuda Katz"
     }, 
    body: "My first post. Wheeeee!" 
};

访问情况

<h1>{{author.id}}</h1> 
 {{#with author}} 
 <h1>{{../title}}</h1>
 {{/with}}

6. 其他注意点

• {{}}与{{{}}}，{{}}会将所有的内容解析并转义，{{{}}}不会对html内容进行操作，这样我们需要的html就可以保全，但是必须保证html中无""（改成 ' '）,还有不能有换行等，这样会报错
• 还有与volicity有一个冲突的过程，需要注意。
  这就是我要说的详细内容，缺少请指正，以便及时更新，及时补充。