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

时间:2018-07-19 18:04:17

标签: jsrender jsviews

我有一个具有以下格式的数组:

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

1 个答案:

答案 0 :(得分:1)

要进行渲染而无需迭代,您可以编写:

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

请参见将数组传递给render(),但无需迭代。this documentation topic中。

顺便说一句,尽管{{for}}也可以使用,但是您也可以写{{for #data}}{{for ~root}}-

也可以看看this answer来回答类似的问题。