在循環內的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視圖中訪問方法

回答

相關問題