在循环内的Backbone.js视图中访问方法

我正在研究一个包含ItemView元素的ItemListView的应用程序。在我的ItemListView中，我使用jQuery .each()方法遍历项目集合并将它们呈现为列表元素。在循环内的Backbone.js视图中访问方法

我已经完成了所有部分，除了将li元素实际附加到包含ul的元素之外。难点在于我的.each()循环内部访问ItemListView.appendItem方法。我试过使用this.appendItem和self.appendItem，但在循环内this是item和self是window对象。

这就是我现在所拥有的：

ItemListView = Backbone.View.extend({ 
    el: '#item-rows', 
    initialize: function() { 
     this.collection = new Items(); 
     this.render(); 
    }, 
    render: function() { 
     $.each(this.collection.models, function (i, item) { 
      var itemview = new ItemView({ model: item }); 
      this.appendItem(itemview); // this refers to the item, so appendItem is undefined 
     }); 
    }, 
    appendItem: function (itemView) { 
     $(this.el).append(itemView.render().el); 
    } 
}); 

var itemlistview = new ItemListView;

我敢肯定，上下文问题是唯一的问题，因为我已经被他们输出到控制台，并检查了其他部分的这他们看起来很好。

我错过了什么？

来源

2012-02-09 Josh Earl

是的，这是一个非常简单的修复。你只需要在外部环境中参考this。

render: function() { 
    var somereftothis = this; 
    $.each(this.collection.models, function (i, item) { 
     var itemview = new ItemView({ model: item }); 
     somereftothis.appendItem(itemview); // this refers to the item, so appendItem is undefined 
    }); 
},

来源

2012-02-09 03:45:38 JayC

哈，是你的appendItem功能将工作，忘了关于那个技巧。谢谢！ – 2012-02-09 03:49:26

把这个临时变量称为“那个”是很普遍的。 – knub 2012-02-09 12:00:52

然而，更好的做法是在@rfunduk发布的答案中正确设置上下文 – 2012-06-12 19:23:33

更骨干-Y办法做到这一点是使用收集的each，由underscore.js提供：

render: function() { 
    this.collection.each(function(item, index) { 
    var itemView = new ItemView({ model:item }); 
    this.appendItem(itemView); 
    }, this); 
    return this; 
}

注：

通知第二参数去each其中参考功能绑定到
each将元素fi第一个和第二个指标
render一般应为链接的目的（如docs提到）返回this，我不认为，你不希望这部分

来源

2012-03-13 12:40:42 rfunduk

在循环内的Backbone.js视图中访问方法

回答

相关问题