template(filename,data) 中data的问题

template(tpl,data)中data的类型不同时的区别

     <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年纪</th>
            </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
    </table>

 <script id="tpl" type="text/html">
        {{each option}}
        <tr>
            <td>{{$value}}</td>
            <td>{{$value}}</td>
        </tr>
    {{/each}}
    </script>
    <script>
        var option = { name: "jack", age: 18 }
        var html = template('tpl', { option })
        $('#tbody').html(html);
    </script>

注意上边当闯过去的是一个对象时,遍历的是对象的key

1. 当data为一个对象时,模板中直接调用对象中的属性

//当data为一个对象时
       var option = { name: "jack", age: 18 }
        var html = template('tpl',  option )
        $('#tbody').html(html);

//模板中直接调用对象中的属性
 <script id="tpl" type="text/html">
        {{each option}}
        <tr>
            <td>{{$value}}</td>
            <td>{{$value}}</td>
        </tr>
    {{/each}}
    </script>

2. 当data被{}包裹时

    var option = { name: "jack", age: 18 }
    var html = template('tpl',  {option} )
    $('#tbody').html(html);

//模板中通过data.属性名 调用
 <script id="tpl" type="text/html">
       
        <tr>
            <td>{{option.name}}</td>
            <td>{{option.age}}</td>
        </tr>
    </script>

<font color='red'>小结</font>
通俗点说 template('tpl', data ) 中传递过去的data,会去掉外面的{},
如果为{name:'jack',age:18} 在模板中就只能通过 name ,age 这样的属性名访问;
如果为{data:{name:'jack',age:18}} ,去掉{},就是data:{name:'jack',age:18},通过 data.key 访问;