Javascript 在backbone.js中访问两个视图上的集合
嗨,我有一个集合和两个视图。在我的view1中,我正在向集合添加数据,view2将只渲染和显示有关集合的任何更改。但我不能让它工作。问题是我本来是这样做的Javascript 在backbone.js中访问两个视图上的集合,javascript,backbone.js,requirejs,Javascript,Backbone.js,Requirejs,嗨,我有一个集合和两个视图。在我的view1中,我正在向集合添加数据,view2将只渲染和显示有关集合的任何更改。但我不能让它工作。问题是我本来是这样做的 return new CartCollection(); 但是他们说这是一个坏习惯,所以我改变了它。但当我在view1上实例化cart集合时,它会添加,但view2似乎看不到更改,并且什么也不呈现 有什么想法吗 这是我的购物车收藏 define([ 'underscore', 'backbone', 'model/cart' ],
return new CartCollection();
但是他们说这是一个坏习惯,所以我改变了它。但当我在view1上实例化cart集合时,它会添加,但view2似乎看不到更改,并且什么也不呈现
有什么想法吗
这是我的购物车收藏
define([
'underscore',
'backbone',
'model/cart'
], function(_, Backbone, CartModel) {
var CartCollection = Backbone.Collection.extend({
model : CartModel,
initialize: function(){
}
});
return CartCollection;
});
这是我的项目视图(视图1)
我的车视图(视图2)
问题是您已经创建了两个不同的CartCollection实例。因此,当您将数据更新或提取到一个实例中时,另一个实例不会改变,但保持不变 相反,您需要在两个视图中使用相同的CartCollection实例(或者保持两个insync)。假设两个视图位于同一个require.js模块中,您需要: 1) 实例化CartCollection实例并将其存储在两个视图都可以访问的位置。你可以把它放在路由器、父视图或其他任何地方。 e、 g 2) 您需要将CartCollection实例传递给每个视图。 e、 g 您可能还希望只将购物车模型传递给CartView,而不是整个集合。 e、 g
如何在两个视图之间传递对CartCollection实例的引用?这可能就是问题所在。我不是很确定,但我只是在两个视图上都添加了这段代码。var cartcollection=新建cartcollection();我做得对吗?
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();
}
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),
}
});
},
var router = Backbone.Router.extend({});
router.carts = new CartCollection();
var view1 = new ItemView({ collection: router.carts });
var view2 = new CartView({ collection: router.carts });
var cartModel = router.carts.get(1);
var view2 = new CartView({ model: cartModel });