컬렉션이 함수가 아니거나 컬렉션이 백본의 생성자가 아닙니다.

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를 업데이트해야 true 인 경우. 이제 그 코드를 기반으로 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()입니다.