在backbone.js的两个视图访问集合

嗨，我有一个集合和两个视图。在我的视图1中，我将数据添加到我的集合中，view2将仅显示和显示有关集合的任何更改。但我无法实现它的工作。问题原本是我这样做在backbone.js的两个视图访问集合

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控件（厂景）

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（视图2）

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

},

来源

2012-04-04 jongbanaag

如何在两个视图之间传递对CartCollection实例的引用？这可能是问题所在。 – 2012-04-04 07:02:49

我不太确定，但我只是在这两个视图上添加了这段代码。 var cartcollection = new CartCollection（）;我做对了吗？ – jongbanaag 2012-04-04 07:17:24

问题是你已经创建CartCollection 2个不同的实例。所以，当你更新或提取数据到一个实例时，另一个不会改变，但保持不变。

相反，你需要使用CartCollection的同一实例跨越2次（或可选择地保持2 INSYNC）。假设这两种观点都是一样的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 });

您可能还想将购物车模型传递给CartView，而不是整个集合。例如

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

来源

2012-04-04 07:49:30

在backbone.js的两个视图访问集合

回答

相关问题