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

cartModel和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

Answer 2

    $(function() {
        
        var cartModel = Backbone.Model.extend({
            defaults: {
                 id: null,
                 item: "",
                 quantity: 1
            }
        });
        var cartCollection = Backbone.Collection.extend({
            model: cartModel
        });
        // sample data
        var data = [{id: 1, item:"testA"}, {id: 2, "item":"testB"},  {id: 1, "item":"testA"}, {id: 1, "item":"testA"}]
        var cart = new cartCollection();
        for(i in data){
            var item = data[i];
            // check if item already exists in collection
            var model = cart.get(item.id);
            if(model){
                // increment model's quantity by 1
                var quantity = model.get("quantity");
                model.set("quantity", ++quantity);
                // remove the model from collection and add updated model 
                cart.remove(item.id);
                cart.add(model);
            }else{
                // if model doesn't exist in collection
                // simple add it to collection
                cart.add(item);
            }
        }
        console.log(cart);
    });

<script src="http://getfirebug.com/firebug-lite-debug.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone-min.js"></script>

骨干更新模型，如果它已经存在于集合中

2 个答案: