当我使用 for 循环时，JSRender/JSView 重复所有模板

Question

我有一个这种格式的数组：

{[
{ title : "", artist : "" },
{ title : "", artist : "" },
{ title : "", artist : "" },
{ title : "", artist : "" }
]}

当我尝试打印数据时，我得到了 n 次完整的模板（Json 数据长度）。我有：

var list = new Array();
list.push({ title : **data**, artist : **data** });
var songsTemplate = $.templates("#topSongsTemplate");
var html = songsTemplate.render(list);
$("#topSongs").html(html);

我只希望我的模板的 for 重复。但是我在我的 div 中一直重复得到完整的模板。我错过了什么？：

<script type="text/x-jsrender" id="topSongsTemplate">
    <div class="col-md-6">
        <i class="fa fa-trophy"></i> <span data-i18n="search.top_tracks">Top 20 Tracks</span>
        <div class="separator hr-line-dashed m-t-xs"></div>
        <ol>
            {{for ~root }}
                <li>{{>title}} - <small>{{>artist}}</small></li>
            {{/for}}
        </ol>
    </div>
    </script>

Answer 1

要在没有迭代的情况下进行渲染，您可以编写：

var html = songsTemplate.render(list, true);

参见将数组传递给render()，但没有迭代。在this documentation topic中。

顺便说一句，你同样可以写 {{for}} 或 {{for #data}} - 尽管 {{for ~root}} 也可以。

也可以查看this answer 的类似问题。