0

こんにちは、コレクションと 2 つのビューがあります。ビュー 1 でコレクションにデータを追加すると、ビュー 2 はコレクションに関する変更をレンダリングして表示するだけです。しかし、私はそれを機能させることができません。問題はもともと私がこれをやっているということです

return new CartCollection();

しかし、彼らはそれが悪い習慣だと言っているので、削除して変更しました。しかし、ビュー1でカートコレクションをインスタンス化すると追加されますが、ビュー2は変更を認識せず、何もレンダリングしないようです。

何か案は？

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

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

マイカートビュー (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),
     }
  });

},
4

1 に答える 1

7

問題は、CartCollection の 2 つの異なるインスタンスを作成したことです。そのため、1 つのインスタンスにデータを更新またはフェッチしても、もう一方のインスタンスは変更されず、同じままです。

代わりに、2 つのビューで CartCollection の同じインスタンスを使用する必要があります (または、2 つのビューを非同期に保つ必要があります)。両方のビューが同じ 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 });
于 2012-04-04T07:49:30.850 に答える