Zugriff auf Sammlung auf zwei Ansichten in backbone.js

Question

Hallo, ich habe eine Sammlung und zwei Ansichten. In meiner Ansicht1 füge ich Daten zu meiner Sammlung hinzu und in view2 werden alle Änderungen an der Sammlung gerendert und angezeigt. Aber ich kann es nicht zur Arbeit bringen. Das Problem ist ursprünglich, ich mache das

return new CartCollection(); 

Aber sie sagen, es ist eine schlechte Praxis, also entferne ich es geändert. Aber wenn ich die Warenkorbsammlung in View1 instanziiere, würde es hinzufügen, aber es scheint, dass View2 die Änderungen nicht sieht und nichts rendert.

Irgendwelche Ideen?

Hier ist meine Warenkorb-Sammlung.

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

Hier ist meine 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(); 
} 

Mein 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

Das Problem ist, dass Sie zwei verschiedene Instanzen von CartCollection erstellt haben. Wenn Sie also Daten in eine Instanz aktualisieren oder abrufen, ändert sich die andere nicht, bleibt jedoch gleich.

Stattdessen müssen Sie die gleiche Instanz von CartCollection über die zwei Ansichten verwenden (oder alternativ halten Sie die 2 insync) .Assuming beiden Ansichten in dem gleichen require.js Modul sind Sie müssen:

1) Instantiate die CartCollection-Instanz und speichern Sie sie dort, wo beide Ansichten Zugriff haben. Sie könnten dies in den Router, die Elternansicht oder anderswo wirklich einfügen. z.B.

2) Sie müssen die CartCollection-Instanz an jede Ihrer Ansichten übergeben. z.B.

Sie können auch das Cart-Modell anstelle der gesamten Kollektion an CartView übergeben. z.B.

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