Sammlung ist keine Funktion oder Sammlung ist kein Konstruktor in Backbone

Question

Dieser Code von mir bleibt auf Wurffehler ich verstehe nicht warum. nur

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"); } 

Also, was ich tun möchte, ist zu überprüfen, ob die CartCollection das gleiche Modell hat bereits und wenn sie wahr sollte es die Menge Atrib des Modells aktualisieren. Basierend auf diesem Code gibt es zurück CartCollection ist keine Funktion oder kein Konstruktor. Warum zum Teufel ist das? Irgendwelche Ideen? Dank

aktualisieren

Ich Rückgrat verwenden, erfordern, KendoUI Gitter und unterstreichen auf diese so meinen Code ist dies:

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

Ich denke, das Problem ist, dass Sie die CartCollection doppelt instanziieren. Das heißt, cart_collection.js gibt eine new CartCollection() zurück und in itemlist_view.js instanziieren Sie es erneut mit var cartcollection = new CartCollection();.

Ändern Sie diese Zeile zu var cartcollection = CartCollection; und sehen Sie, wie das geht. Natürlich können Sie auch die Variable cartcollection entfernen und ihre Verwendung durch CartCollection ersetzen.

Bei einer anderen Anmerkung würde ich ernsthaft erwägen, new CartCollection() von Ihrem cart_collection.js NICHT zurückzugeben. Dies ist eine sehr schlechte Übung, da Sie nur eine Instanz dieser Sammlung verwenden können. Außerdem ist es für den Entwickler nicht offensichtlich, dass sie eine Instanz der Sammlung und nicht den Konstruktor dafür zurückerhalten.

Ich würde empfehlen, CartCollection instaed, und dann instanziieren Sie es in Ihrer itemlist_view.js Datei mit new CartCollection(). Auf diese Weise können Sie bei Bedarf später weitere dieser Sammlungen instanziieren.

Gleiche Empfehlung für cartlist_view.js, die eine new CartListView() zurückgibt.