Handlebars模板引擎渲染页面

Posted 2020-10-02 NT.Wang

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

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：都返回下标