Question

This code of mine keeps on throwing error i don’t understand why.

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

So what i want to do is check if the CartCollection has the same model already and if true it should update the Qty atrib of the model only. Now based on that code it returns CartCollection is not a function or not a constructor. Why the hell is that!? Any ideas? Thanks

Update

I’m using backbone,require,KendoUI grid and underscore on this one so my code is this:

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

I think the problem is that you are double instantiating the CartCollection. That is, cart_collection.js returns a new CartCollection() and in itemlist_view.js you instantiate it again with var cartcollection = new CartCollection();.

Change that line to var cartcollection = CartCollection; and see how that does. Obviously you could also remove the cartcollection variable and replace its usages with CartCollection.

On another note, I would seriously consider NOT returning new CartCollection() from your cart_collection.js. This feels like a very bad practice in that you will only ever be able use one instance of that collection. Also, it isn’t obvious to the developer that they are getting back an instance of the collection rather than the constructor for it.

I would recommend returning CartCollection instaed, and then instantiating it in your itemlist_view.js file with new CartCollection(). This way you will be able to instantiate more of those collections later if needed.

Same recommendation for cartlist_view.js returning a new CartListView().