Handlebars.js 实际应用

1.获取返回的对象值用{{enrity}}表示

2.获取返回的对象是list可以

//数据结构层次
"playVideos": [
    {
      "title": "title",
      "instro": "instro",
      "contentType": 3,
      "sourceName": "sourceName",
      "url": "url",
      "labelIds": [1,2,3,4],
      "contentTypeName": "视频"
    },
    {},
    {}
  ]

//html 页面
{{#each playVideos}}
<li>
    <a href="{{url}}" target="_blank" class="video">
        <img src="{{picUrl}}" width="350" height="192">
        <span class="icon"></span>
        <i class="tit">{{title}}</i>
    </a>
    <div class="labels">
        <span >{{sourceName}}</span>
        {{#each labelNames}}
        <a href="#" target="_blank">{{this}}</a>
        {{/each}}
    </div>
</li>
{{/each}}

3.遇到想使用的函数，可是找不到时可以自己定义一个helper

//xxx.js
var hbs   = require('handlebars');
// 自定义helper 
// replace函数
hbs.registerHelper('replaceHepler', function(text,replacePattern,resultPattern) {
    text = hbs.Utils.escapeExpression(text);
    text = text.toString();
    text = text.replace(replacePattern, resultPattern);
    return new hbs.SafeString(text);
});
//索引向上添加多少
hbs.registerHelper('addHelper ', function (index,number) {
    return index+number;
});

replaceHelper 使用样例

// 多个参数中间以空格分开
<img src="{{replaceHepler picUrl '.jpg' '_120x90.jpg'}}" width="100" height="75">

addHelper 使用样例

//{{@index}} 是获取列表的索引位置 
<i class="item{{addHelper @index 1}}">