template(tpl,data)中data的類型不同時的區(qū)別

     <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>

注意上邊當(dāng)闖過去的是一個對象時,遍歷的是對象的key

1. 當(dāng)data為一個對象時,模板中直接調(diào)用對象中的屬性

//當(dāng)data為一個對象時
       var option = { name: "jack", age: 18 }
        var html = template('tpl',  option )
        $('#tbody').html(html);

//模板中直接調(diào)用對象中的屬性
 <script id="tpl" type="text/html">
        {{each option}}
        <tr>
            <td>{{$value}}</td>
            <td>{{$value}}</td>
        </tr>
    {{/each}}
    </script>

2. 當(dāng)data被{}包裹時

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

//模板中通過data.屬性名 調(diào)用
 <script id="tpl" type="text/html">
       
        <tr>
            <td>{{option.name}}</td>
            <td>{{option.age}}</td>
        </tr>
    </script>

<font color='red'>小結(jié)</font>
通俗點說 template('tpl', data ) 中傳遞過去的data,會去掉外面的{},
如果為{name:'jack',age:18} 在模板中就只能通過 name ,age 這樣的屬性名訪問;
如果為{data:{name:'jack',age:18}} ,去掉{},就是data:{name:'jack',age:18},通過 data.key 訪問;