循环构建视图主干的集合

Question

我正在构建一个骨干应用程序，我在构建视图时遇到了一些问题，视图是通过循环构建一个集合并输出HTML。现在，我可以输出HTML，并在我的浏览器中看到它，但它似乎总是覆盖以前的数据，所以例如，我循环我的集合并从模型吐出名称我应该得到一个列表，看起来像这样，

• 文件编号1
• 文件编号2
• 文件编号3

然而我得到的输出是，

• 文件编号3
• 文件编号3
• 文件编号3

所以基本上在每个循环上它都会覆盖自己。我怎样才能阻止这种情况发生，我在渲染模板时假设它是一个特殊问题？

以下是我的观看代码，

app.FileListItem = Backbone.View.extend({

tagName: 'li',
className: 'image-thumb',

template: _.template($('#tpl-files-image-panel').html()),

events: {

},

initialize: function() {

},

render: function() {

    this.model.set({"timeago" : $.timeago(this.model.get('last_modified'))});
    //console.log(this.model);
    this.$el.html(this.template(this.model.toJSON()));

    return this;

},

}）;

它就像这样被调用，

item.get('files').each(function(file){
    var itemFileListItem = new app.FileListItem({
        model: file
     });

     that.$el.find('.tab-content.files:first').find('.image-grid').append(itemFileListItem.render().el);
 });

item.get('files')看起来像这样，

和that.$el是article.item，其中有多个页面由另一个循环创建。

任何人都可以提出一个解决方案来阻止数据在每个循环中被覆盖吗？

Answer 1

我认为发生的事情可能与.each（）的每次迭代中覆盖的文件引用有关。

我已多次遇到此问题，一个非常简单的解决方案是将引用传递给外部函数以构建独立视图。您需要查看更多代码，我相信我可以更彻底地进行调查。请试一试：

item.get('files').each(function(file){
    that.$el.find('.tab-content.files:first').find('.image-grid').append(returnItem(file).render().el);
});

function returnItem(file) {
    var itemFileListItem = new app.FileListItem({
        model: file
    });
    return itemFileListItem;
}