Коллекция не является функцией или 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 имеет ту же модель уже и если верно он должен обновить Кол atrib из только модели. Теперь, основываясь на этом коде, он возвращает CartCollection не функцию или не конструктор. Почему, черт возьми, это !? Есть идеи? Благодаря

Update

Я использую позвоночник, требуют, 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.

С другой стороны, я серьезно рассмотрел бы НЕ возвращение new CartCollection() с вашего cart_collection.js. Это кажется очень плохой практикой в ​​том, что вы сможете использовать только один экземпляр этой коллекции. Кроме того, разработчику не очевидно, что они возвращают экземпляр коллекции, а не конструктор для нее.

Я бы порекомендовал вернуть CartCollection instaed, а затем создавал его в файле itemlist_view.js с new CartCollection(). Таким образом, при необходимости вы сможете создавать больше этих коллекций.

Такая же рекомендация для cartlist_view.js, возвращающая new CartListView().