首页 > 其他 > 详细

Handlebars模板引擎渲染页面

时间:2017-08-15 22:25:08      阅读:376      评论:0      收藏:0      [点我收藏+]

基本使用,并简单列举了几种常见的数据格式的渲染方式

js:
var testTpl = Handlebars.compile($(‘#test‘).html()); //模板
    var arr = [1,2,3] //数据
    $(‘#box‘).append(testTpl(arr)); //调用

html: <script type="text/x-handlebars-template" id="test"> {{#each this}} <li>索引:{{@index}},内容:{{this}}</li> {{/each}} </script>

下面说几种数据源如何渲染数据,js中基本一样,声明模板->声明要渲染数据->调用并插入到页面 ,不明白看 上面基本使用

数据源是Array 

js:
var arr = [1,2,3]
html:
{{#each this}}
        <li>索引:{{@index}},内容:{{this}}</li>
{{/each}}

数据源是数组对象(对象内部包含数组,再次each这个数组即可

js:
var arr = [
    {‘a‘:‘1‘,‘b‘:2,‘c‘:[‘4‘,‘5‘,‘6‘]},
    {‘a‘:‘11‘,‘b‘:22,‘c‘:[‘44‘,‘55‘,‘66‘]}
 ];
html:
{{#each this}}
    <li>{{a}}</li>
    <li>{{b}}</li>
    {{#each c}}
        <li>父级索引{{../a}}.{{@index}}:访问父级:{{../a}} 。当前索引:{{@index}},当前元素:{{this}} </li>
    {{/each}}
{{/each}}

数据源是对象

js:
var context = {
    data:{
        one: "un",
        two: "deux",
        three: "trois"
    }
}
html:
<ul>
    {{#each data}}
        <li>对象的key:{{@key}},对象的值:{{this}}</li>
    {{/each}}
</ul>
<ol>
    {{#each data}}
        <li>对象的索引:{{@index}},对象的值:{{this}}</li>
    {{/each}}
</ol>

数据源数对象数组

js:
var context = {
            data: ["one", "two", "three"],
            data2: ["one", "two", "three"],
        };
html:
<ul>
    {{#each data}}
        <li>
            数组的索引:{{@index}} ,索引对应的内容:{{this}}{{#eq @index 0}}王生辉{{/eq}}
        </li>
    {{/each}}
    {{#each data2}}
        <li>
            数组的索引:{{@key}},索引对应的内容:{{shenghui this}}
        </li>
    {{/each}}
</ul>

说明:@key 和@index 

     @key:如果当循环的数据是数组 则返回下标,如果是对象则返回key值

   @index:都返回下标

 

 

 

 

 

 

 

 

 

 

Handlebars模板引擎渲染页面

原文:http://www.cnblogs.com/NTWang/p/7368014.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!