集合不是一個函數或集合不是主幹中的構造函數

Question

我的這段代碼不斷拋出錯誤，我不明白爲什麼。

var id = $(ev.currentTarget).data("id"); 
    var item = ItemCollection.getByCid(id); 
    alert(item.get("ItemCode")); 
    var qty = 1; 
    var cartcollection = new CartCollection(); 
    cartcollection.add(item); 
    CartListView.render(); 
    var itemcode = cartcollection.where({ItemCode: item.get("ItemCode")}); 
    if(itemcode.length > 0){ alert("success"); } 

所以我想要做的是檢查，如果CartCollection具有相同的模型已經並且如果爲真，應該只更新模型的數量atrib。現在基於該代碼它返回CartCollection不是一個函數或不是一個構造函數。爲什麼是這樣！？有任何想法嗎？由於

更新

我使用的骨幹，要求，KendoUI網格和在這一個強調所以我的代碼是這樣的：

itemlist_view.js

define([ 
'jquery', 
'underscore', 
'backbone', 
'model/item_model', 
'model/cart_model', 
'collection/item_collection', 
'collection/cart_collection', 
'view/cart/cartlist_view', 
'text!templates/items/itemlist.html' 
],function($, _, Backbone, Item, Cart, ItemCollection, CartCollection, CartListView, ItemListTemplate){ 

var ItemListView = Backbone.View.extend({ 
el: $("#mainContainer"), 
events:{ 
    "click #itemListContainer li" : "AddToCart" 
}, 
initialize: function(){ 
    this.model = Item; 
    this.collection = ItemCollection; 
    this.collection.bind("reset", this.render); 
}, 
render: function(){ 
    var data = { 
    items: ItemCollection.models 
    } 
    var compiledTemplate = _.template(ItemListTemplate , data); 
    $("#itemContainer").html(compiledTemplate); 
}, 
AddToCart:function(ev){ 
    ev.preventDefault(); 
    var id = $(ev.currentTarget).data("id"); 
    var item = ItemCollection.getByCid(id); 
    alert(item.get("ItemCode")); 
    var qty = 1; 
    var cartcollection = new CartCollection(); 
    cartcollection.add(item); 
    CartListView.render(); 
    var itemcode = cartcollection.where({ItemCode: item.get("ItemCode")}); 
    if(itemcode.length > 0){ alert("success"); } 
} 
}); 
return new ItemListView; 
}); 

cart_collection.js

define([ 
'underscore', 
'backbone', 
'model/cart_model' 
],function(_, Backbone, Cart){ 
var CartCollection = Backbone.Collection.extend({ 
    model: Cart, 
    initialize: function(){ 

    } 
}); 
return new CartCollection; 
}); 

cartlist_view.js

define([ 
'jquery', 
'underscore', 
'backbone', 
'model/cart_model', 
'collection/cart_collection', 
'text!templates/cart/cartlist.html' 
], function($, _, Backbone, Cart, CartCollection, CartListTemplate){ 

var Model = kendo.data.Model, 
    ObservableArray = kendo.data.ObservableArray; 

function wrapBackboneModel(backboneModel, fields) { 
    return Model.define({ 
     fields: fields, 
     init: function(model) { 
      if (!(model instanceof backboneModel)) { 
       model = new backboneModel(model); 
      } 

      Model.fn.init.call(this, model.toJSON()); 
      this.backbone = model; 
     }, 
     set: function(field, value) { 
      Model.fn.set.call(this, field, value); 

      this.backbone.set(field, value); 
     } 
    }); 
} 

function wrapBackboneCollection(model) { 
    return ObservableArray.extend({ 
     init: function(collection) { 
      ObservableArray.fn.init.call(this, collection.models, model); 

      this.collection = collection; 
     }, 

     splice: function(index, howMany) { 
      var itemsToInsert, removedItemx, idx, length; 

      itemsToInsert = Array.prototype.slice.call(arguments, 2); 

      removedItems = kendo.data.ObservableArray.fn.splice.apply(this, arguments); 

      if (removedItems.length) { 
       for (idx = 0, length = removedItems.length; idx < length; idx++) { 
        this.collection.remove(removedItems[idx].backbone); 
       } 
      } 

      if (itemsToInsert.length) { 
       for (idx = 0, length = itemsToInsert.length; idx < length; idx++) { 
        this.collection.unshift(itemsToInsert[idx].backbone); 
       } 
      } 

      return removedItems; 
     } 
    }); 
} 

kendobackboneCollection = wrapBackboneCollection; 
kendobackboneModel = wrapBackboneModel; 


var CartListView = Backbone.View.extend({ 
el: $("#cartContainer"), 

initialize: function(){ 
    this.collection = CartCollection; 
    this.model = Cart; 
    this.collection.bind("change", this.render); 
}, 
render: function(){ 
    console.log("here"); 
    this.el.html(CartListTemplate); 
    var CartWrapper = kendobackboneModel(Cart, { 
    ItemCode: { type: "string" }, 
    ItemDescription: { type: "string" }, 
    RetailPrice: { type: "string" }, 
    Qty: { type: "string" }, 
    }); 
    var CartCollectionWrapper = kendobackboneCollection(CartWrapper); 

    this.$("#grid").kendoGrid({ 
    editable: true, 
    toolbar: ["create"], 
    columns: ["ItemDescription", "Qty", "RetailPrice"], 
    dataSource: { 
     schema: {model: CartWrapper}, 
     data: new CartCollectionWrapper(CartCollection), 
    } 
    }); 

}, 

}); 
return new CartListView; 
}); 

Answer 1

我認爲問題在於你是雙重實例化CartCollection。即，cart_collection.js返回new CartCollection()，並在itemlist_view.js中再次使用var cartcollection = new CartCollection();實例化它。

將該行更改爲var cartcollection = CartCollection;並查看它是如何工作的。顯然你也可以刪除cartcollection變量，並用CartCollection替換它的用法。

另一方面，我會認真考慮不要從cart_collection.js返回new CartCollection()。這感覺是一種非常糟糕的做法，因爲您只能使用該集合的一個實例。另外，開發人員不明白他們正在取回集合的實例，而不是構造函數。

我會建議返回CartCollection instaed，然後在itemlist_view.js文件中用new CartCollection()實例化它。這樣，如果需要，您將能夠稍後實例化更多這些集合。

相同推薦cartlist_view.js返回new CartListView()。