10

同じJSONオブジェクトコードがul要素を使用して出力を生成するが、tableタグを使用しないのはなぜですか。

私は次のような口ひげのテンプレートを持っています：

<div id="template-ul">
    <h3>{{name}}</h3>
    <ul>
        {{#students}}
        <li>{{name}} - {{age}}</li>
        {{/students}}
    </ul>
</div>

<div id="template-table">
    <table>
        <thead>
            <th>Name</th>
            <th>Age</th>
        </thead>
        <tbody>
        {{#students}}
            <tr>
                <td>{{name}}</td>
                <td>{{age}}</td>
            </tr>
        {{/students}}
        </tbody>
    </table>
</div>

javascriptコードは次のとおりです。

var testing = {
    "name" : "student-collection",
    "students" : [
        {
            "name" : "John",
            "age" : 23
        },
        {
            "name" : "Mary",
            "age" : 21
        }
    ]
};

var divUl = document.getElementById("template-ul");
var divTable = document.getElementById("template-table");

divUl.innerHTML = Mustache.render(divUl.innerHTML, testing);
divTable.innerHTML = Mustache.render(divTable.innerHTML, testing);

これがjsFiddleのコードです-http ://jsfiddle.net/pRSjH/2/

4

2 に答える 2

31

tbodyで口ひげタグにコメントすることもできます。そして、テーブルは正しく構築されます。
私のテンプレートの例：

<div id="template-table">
    <table>
        <thead>
            <th>Name</th>
            <th>Age</th>
        </thead>
        <tbody>
        <!--{{#students}}-->
            <tr>
                <td>{{name}}</td>
                <td>{{age}}</td>
            </tr>
        <!--{{/students}}-->
        </tbody>
    </table>
</div>
于 2013-08-28T04:28:59.637 に答える
2

divTable.innerHTML正しいテンプレートの代わりにこれを返します。おそらく、ブラウザが無効なHTMLをレンダリングしようとするために発生します。<script>この問題を解決するために、テンプレートをタグに入れることができると思います（フィドル）

于 2013-03-23T13:13:43.150 に答える