javascript - 循环集合构建 View 主干

Question

我现在正在构建一个 Backbone 应用程序，在构建 View 时遇到了一些问题，该 View 是通过循环遍历集合并输出 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() 的每次迭代中被覆盖的文件引用有关

我已经多次遇到这个问题，一个非常简单的解决方案是将引用传递给外部函数来构造独立 View 。通过查看更多代码，我确信我可以进行更彻底的调查。请尝试一下:

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;
}