Handlebars模板引擎渲染页面
基本使用,并简单列举了几种常见的数据格式的渲染方式
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:都返回下标