Collection.get在backbone.js中返回undefined

Question

我有問題，collection.get和model.get返回undefined。

這裏是我的initializecode

initialize: function() { 
    this.collection = new productsCollection(); 
    this.model = new productModel(); 
} 

這裏是我的渲染代碼

this.collection.fetch({ 
    success: function (product) { 
     console.log(product); 
     $(that.el).html(_.template(productListTemplate, { products: product.models, _: _ })); 
    } 
}); 

我的產品列表中顯示的罰款。當我在每個產品上點擊我得到其中名稱可以更改

我想要得到的模型，並觸發保存

設定新的名字，但我無法得到該產品的模型這裏是一個彈出代碼

$("#productName").val($(e.currentTarget).html()); 

var ID = $(e.currentTarget).data("id"); 
var item = this.collection.get(ID); 

console.log("start.........."); 
console.log(item); 
console.log(ID) 
//   console.log(this.collection); 
console.log(this.model.get(item)); 
console.log("end.........."); 

$('.modal').modal('toggle'); 

我能夠得到正確的ID在控制檯，但沒有收藏和模型

一些可以幫助一個由於事先

UPDATE 這裏是完整的視圖代碼

function ($, _, Backbone, popupModal, productTab, productsCollection, productListTemplate, productModel) { 
    var productListView = Backbone.View.extend({ 
     el: $("#page"), 
     initialize: function() { 
      this.collection = new productsCollection(); 
      this.model = new productModel(); 
      this.model.bind('change', this.loadResults, this); 
     }, 
     render: function() { 
      this.loadResults(); 
     }, 
     loadResults: function() { 
      var that = this; 
      this.collection.fetch({ 
       success: function (product) { 
        console.log(product); 
        $(that.el).html(_.template(productListTemplate, { products: product.models, _: _ })); 
       } 
      }); 
      var modalWindow = $(".modal").modal({ 
       show: false, 
       backdrop: true, 
       closeOnEscape: true 
      }); 
      $('#createProduct').click(function (e) { 
       this.modalWindow.modal('show'); 
      }); 
     }, 
     // This will simply listen for scroll events on the current el 
     events: { 
      "click #saveProduct": "saveProduct", 
      "click .productTabs": "productTabs", 
      "click .productDetails": "productDetails" 
     }, 
     saveProduct: function() { 
      this.model.set({ 
       Name: $('#productName').val() 
      }); 
      this.model.save({ id: this.model.get('id') }, 
     { 
      success: function (model, response) { 
       //     console.log("success"); 
      }, 
      error: function (model, response) { 
       //     console.log(response); 
       var errorMsg = JSON.parse(response.responseText); 
       $(".errorMessage").html('<div class="alert alert-error">' + errorMsg.Error + '</div>'); 
      } 
     }); 
     }, 
     productTabs: function (e) { 
      e.preventDefault(); 
      $(this).tab('show'); 
     }, 
     productDetails: function (e) { 
      e.preventDefault(); 
      $("#productName").val($(e.currentTarget).html()); 
      var ID = $(e.currentTarget).data("id"); 
      var item = this.collection.get(ID); 
      console.log("start.........."); 
      console.log(item); 
      console.log(ID) 
      //   console.log(this.collection); 
      console.log(this.collection.models.get(item)); 
      console.log("end.........."); 
      $('.modal').modal('toggle'); 
     } 
    }); 
    return new productListView; 
}); 

UPDATE反應

this.collection

b.hasOwnProperty.e 
_byCid: Object 
_byId: Object 
_onModelEvent: function() { [native code] } 
_removeReference: function() { [native code] } 
length: 2 
models: Array[2] 
0: b.hasOwnProperty.e 
1: b.hasOwnProperty.e 
length: 2 
__proto__: Array[0] 
__proto__: s​ 

它有2種型號，我的清單上還有2產品

this.model

_callbacks: Object 
_changed: false 
_changing: false 
_escapedAttributes: Object 
_previousAttributes: Object 
attributes: Object 
ID: "" 
Name: "" 
hRef: "" 
__proto__: Object 
cid: "c2" 
__proto__: s 

屬性是空

這給了我以下

cid: "view1" 
collection: b.hasOwnProperty.e 
_byCid: Object 
_byId: Object 
_onModelEvent: function() { [native code] } 
_removeReference: function() { [native code] } 
length: 2 
models: Array[2] 
__proto__: s 
model: b.hasOwnProperty.e 
_callbacks: Object 
_changed: false 
_changing: false 
_escapedAttributes: Object 
_previousAttributes: Object 
attributes: Object 
cid: "c2" 
__proto__: s 
options: Object 
__proto__: s 

UPDATE這是我看到的時候我擴大我的收藏

b.hasOwnProperty.e 
_byCid: Object 
_byId: Object 
_onModelEvent: function() { [native code] } 
_removeReference: function() { [native code] } 
length: 2 
models: Array[2] 
0: b.hasOwnProperty.e 
_callbacks: Object 
_changed: false 
_changing: false 
_escapedAttributes: Object 
_previousAttributes: Object 
attributes: Object 
ID: "7e0c94fc-7c16-45c9-84a9-a0690103b946" 
Name: "dsa" 
hRef: "Product/dsa" 
__proto__: Object 
cid: "c3" 
collection: b.hasOwnProperty.e 
__proto__: s 
1: b.hasOwnProperty.e 
length: 2 
__proto__: Array[0] 
__proto__: s 

Answer 1

的問題是，你必須綁定所有功能，將通過DOM事件來電，來您的視圖的實例：

所以加入這一行到您的initialize方法：

_.bindAll(this, "saveProduct", "productTabs", "productDetails") 

否則該函數中的this將是全局的window對象而不是您的視圖的實例。

Answer 2

如果

Collection.findWhere({_id: ID}) // get the right answer 

，我們可以得出這樣的結論：

• 到模型中，關鍵是idAttribute
• 爲Collection，關鍵是modelId

---

例如：

var Model = Backbone.Model.extend(); 
var Col = Backbone.Collection.extend({ model: Model }); 

var Persons = new Col([{ 
    _id: 1, 
    name: 'Ken' 
}, { 
    _id: 2, 
    name: 'Mike' 
}, { 
    _id: 3, 
    name: 'John' 
}]); 

console.log(Persons.get(1)); // undefined 

如果指示idAttribute M的：

var M = Backbone.Model.extend({ idAttribute: '_id' }); 
... 
console.log(Persons.get(1)); // the model of Ken 

---

在某些情況下，我們不需要型號，如：

var Col = Backbone.Collection.extend(); 

var Persons = new Col([{ 
    _id: 1, 
    name: 'Ken' 
}, { 
    _id: 2, 
    name: 'Mike' 
}, { 
    _id: 3, 
    name: 'John' 
}]); 

console.log(Persons.get(2)); // undefined 

爲了解決這個問題，我們只需要重寫原始的modelId方法：

var Col = Backbone.Collection.extend({ 
    modelId: function() { 
     return '_id'; 
    } 
}); 
... 
console.log(Persons.get(2)); // the model of Mike 

---

---

P.S：在official docs的更多細節。

---

P.S再次：BackboneJS的舊版本不支持modelId