6

私のMustacheテンプレートが正しくレンダリングされない理由を理解するのに少し役立つかもしれません。以下が機能しない理由は非常に混乱しています。それは私の何かのマイナーな愚かな間違いだと確信しています...

   var tableRows = [
    {name: 'name1',
     values: ['1','2','3']},
    {name: 'name2',
     values: ['1','2','3']},
    {name: 'name3',
     values: ['1','2','3']}
    ];

var template = $('#mustache-template').html();

$('#target').append(Mustache.render(template, {rows: tableRows}));

HTMLテンプレート：

<div id="mustache-template">
    <table>
        <tbody>
              {{#rows}}
                <tr class="">
                  <td>{{name}}</td>
                  {{#values}}
                    <td>{{.}}</td>
                  {{/values}}
                </tr>
              {{/rows}}
        </tbody>
    </table>
</div>

各配列項目が独自の行であるテーブルを期待していますが、代わりに次のようになります。

[object Object]

説明するjsFiddleは次のとおりです。http：//jsfiddle.net/gF9ud/

4

2 に答える 2

13

問題は、ブラウザーがテンプレートを無効なテーブル要素として処理することです。テンプレートをそのようなページに保存することはお勧めできません。使用<script type="text/template">してそれらをラップします。

<script id="mustache-template" type="text/template">
    <table>
      {{#rows}}
        <tr class="">
          <td>{{name}}</td>
          {{#values}}
            <td>{{.}}</td>
          {{/values}}
        </tr>
      {{/rows}}
    </table>
</script>

http://jsfiddle.net/zHkW5/

于 2013-02-09T21:09:07.830 に答える
3

私が見つけた別の解決策は、次のように口ひげをコメントアウトすることです。

<div id="mustache-template">
    <table>
        <tbody>
             <!--  {{#rows}} -->
                <tr class="">
                  <td>{{name}}</td>
                  {{#values}}
                    <td>{{.}}</td>
                  {{/values}}
                </tr>
              <!-- {{/rows}} -->
        </tbody>
    </table>
</div>

私にとっては、私が望んでいたとおりにレンダリングされました。trブラウザは、タグ間のコードを見るのが苦手だと思います。

于 2013-05-27T21:03:55.997 に答える