backbone.jsの2つのビューでのアクセスコレクション

Question

こんにちは、私はコレクションと2つのビューを持っています。私のビュー1では、私は自分のコレクションにデータを追加しています。そして、view2は単にコレクションに関する変更を表示して表示します。しかし、私はそれを働かせることはできません。問題は、もともと私はこの

return new CartCollection(); 

をやっている。しかし彼らはその悪い習慣は、そう私はそれを変更削除言います。しかし、私はview1にカートのコレクションをインスタンス化するとき、それは追加されますが、それはview2は変更を見て、何もレンダリングしないようです。

アイデア？

ここは私のカートコレクションです。

define([ 
'underscore', 
'backbone', 
'model/cart' 
], function(_, Backbone, CartModel) { 
var CartCollection = Backbone.Collection.extend({ 
model : CartModel, 
initialize: function(){ 
} 
}); 
return CartCollection; 
}); 

は、ここに私のitemView（VIEW1）

AddToCart:function(ev){ 
    ev.preventDefault(); 
    //get data-id of the current clicked item 
    var id = $(ev.currentTarget).data("id"); 
    var item = this.collection.getByCid(id); 
    var isDupe = false; 
    //Check if CartCollection is empty then add 
    if(CartCollection.length === 0){ 
     CartCollection.add([{ItemCode:item.get("ItemCode"),ItemDescription:item.get("ItemDescription"),SalesPriceRate:item.get("RetailPrice"),ExtPriceRate:item.get("RetailPrice"),WarehouseCode: "Main",ItemType : "Stock",LineNum:1 }]); 
    }else{ 
     //if check if the item to be added is already added, if yes then update QuantityOrdered and ExtPriceRate 
     _.each(CartCollection.models,function(cart){ 
      if(item.get("ItemCode") === cart.get("ItemCode")){ 
       isDupe = true; 
       var updateQty = parseInt(cart.get("QuantityOrdered"))+1; 
       var extPrice = parseFloat(cart.get("SalesPriceRate") * updateQty).toFixed(2); 
       cart.set({ QuantityOrdered: updateQty }); 
       cart.set({ ExtPriceRate: extPrice }); 
      } 
     }); 
     //if item to be added has no duplicates add new item 
     if(isDupe == false){ 
      var cartCollection = CartCollection.at(CartCollection.length - 1); 
      var lineNum = parseInt(cartCollection.get("LineNum")) + 1; 
      CartCollection.add([{ItemCode:item.get("ItemCode"),ItemDescription:item.get("ItemDescription"),SalesPriceRate:item.get("RetailPrice"),ExtPriceRate:item.get("RetailPrice"),WarehouseCode: "Main",ItemType : "Stock",LineNum:lineNum}]); 
      } 
    } 
    CartListView.render(); 
} 

マイcartview（VIEW2）

render: function(){ 
    this.$("#cartContainer").html(CartListTemplate); 
    var CartWrapper = kendobackboneModel(CartModel, { 
    ItemCode: { type: "string" }, 
    ItemDescription: { type: "string" }, 
    RetailPrice: { type: "string" }, 
    Qty: { type: "string" }, 
    }); 
    var CartCollectionWrapper = kendobackboneCollection(CartWrapper); 
    this.$("#grid").kendoGrid({ 
    editable: true, 
    toolbar: [{ name: "save", text: "Complete" }], 
    columns: [ 
     {field: "ItemDescription", title: "ItemDescription"}, 
     {field: "QuantityOrdered", title: "Qty",width:80}, 
     {field: "SalesPriceRate", title: "UnitPrice"}, 
     {field: "ExtPriceRate", title: "ExtPrice"} 
    ], 
    dataSource: { 
     schema: {model: CartWrapper}, 
     data: new CartCollectionWrapper(CartCollection), 
    } 
    }); 

}, 

Answer 1

問題は、あなたはCartCollectionの2つの異なるインスタンスを作成しましたです。したがって、あるインスタンスにデータを更新またはフェッチすると、他のインスタンスは変更されませんが、同じままです。

代わりにあなたは（2インシンクを維持する代わりに、または）2つのビュー全体にCartCollectionの同じインスタンスを使用する必要が両方のビューを.Assumingは、あなたがする必要があるだろうと同じrequire.jsモジュールにあります。

1）インスタンス化CartCollectionインスタンスを作成し、両方のビューにアクセスできる場所に格納します。これをルーター、親ビュー、または他の場所に置くことができます。例：

var router = Backbone.Router.extend({}); 
router.carts = new CartCollection(); 

2）各ビューにCartCollectionインスタンスを渡す必要があります。例：

var view1 = new ItemView({ collection: router.carts }); 
var view2 = new CartView({ collection: router.carts }); 

さらに、Cartモデルをコレクション全体ではなくCartViewに渡すこともできます。例：

var cartModel = router.carts.get(1); 
var view2 = new CartView({ model: cartModel });