javascript - 如果集合中已存在则 Backbone 更新模型

Question

我正在尝试在backbone.js上实现基本的购物车，我对它是全新的。itemsListView将对象添加到cartCollection。问题是，当模型添加到集合中时，如果此模型已存在于 cartCollection 中，我想增加此模型数量属性。

 var Phone = Backbone.Model.extend({});
var PhonesCollection = Backbone.Collection.extend({
    model: Phone
});
var itemListView = Backbone.View.extend({

    collection: null,
    _template: _.template($('#listTemplate').html()),
    el: $('#phonesDiv'),
    events: {
        'click .buyButton': '_addToCart'
    },
    initialize: function () {
        'use strict';
        this.render();
    },
    render: function () {
        'use strict';
        var rendTemplate = this._template({items: this.collection.toJSON()});
        this.$el.html(rendTemplate);
        return this;
    },
    _addToCart: function (e) {
        'use strict';
        var buttonId = $(e.currentTarget).attr('id');
        var result = this.collection.findWhere({id: buttonId});
        var purchase = {
            id: result.attributes.id,
            name: result.attributes.name,
            price: result.attributes.price
        };
        cartcollection.add(new cartModel({
            id: buttonId,
            item: _.pick(purchase, 'id', 'name', 'price'),
            itemTotalPrice: purchase.price
        }));
        console.log(cartcollection);
    }
});

购物车模型和购物车集合:

var cartModel = Backbone.Model.extend({

    defaults: {
        id: null,
        item: {
            id: null,
            name: null,
            price: null
        },
        itemTotalPrice: 0,
        quantity: 1
    }
});
var cartCollection = Backbone.Collection.extend({
    model: cartModel,
    defaults:{
        totalQuantity: 0,
        totalPrice: 0
    }

Answer 1

您可以通过向集合类添加方法来实现此目的。这是一种方法，使用我调用的方法 addToCart:

var cartModel = Backbone.Model.extend({
  defaults: {
    quantity: 0
  }
});

var cartCollection = Backbone.Collection.extend({
  model: cartModel,
  addToCart: function (model) {
    this.add(model);
    var q = model.get('quantity');
    model.set('quantity', q + 1);
  }
});

当您调用 Backbone 集合的 add 方法时，如果用作参数的模型已在集合中，则不会再次添加。然后，您可以手动增加模型的数量。

下面的代码展示了它是如何工作的；你可以play with it in JSBin 。

var m1 = new cartModel({ name: 'm1' });
var m2 = new cartModel({ name: 'm2' });

var cart = new cartCollection();

cart.addToCart(m1);
cart.addToCart(m1);
cart.addToCart(m2);

console.log('cart length:', cart.length); // 2

console.log('m1 quantity:', m1.get('quantity')); // 2
console.log('m2 quantity:', m2.get('quantity')); // 1