Collection不是功能，或者Collection不是Backbone中的構造函數

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是否已經具有相同的模型，如果為true，則僅應更新模型的Qty atrib。 現在，基於該代碼，它返回CartCollection不是函數或構造函數。 為什么會這樣呢？ 有任何想法嗎？ 謝謝

更新資料

我正在使用骨干，require，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 = new CartCollection(); 。

將該行更改為var cartcollection = CartCollection; 看看效果如何。 顯然，您也可以刪除cartcollection變量，並將其用法替換為CartCollection 。

另一方面，我將認真考慮不要從cart_collection.js返回new CartCollection() 。 這感覺很不好，因為您將只能使用該集合的一個實例。 而且，對於開發人員來說，他們返回的是該集合的實例而不是其構造函數，這並不是很明顯。

我建議先返回CartCollection ，然后使用new CartCollection()在itemlist_view.js文件中實例化它。 這樣，您將可以在以后根據需要實例化更多這些集合。

對於cartlist_view.js相同建議，返回一個new CartListView() 。