Question

我有一个关于在knockoutjs中检查现有产品的问题。

问题是：如果产品存在于购物车行中，产品数量会增加，如果没有，它将被添加到购物车

这是代码：

    var CartLine = function (productid,productName, price, quantity) {
        var self = this;

        self.resultId = ko.observable(productid);
        self.resultProduct = ko.observable(productName);
        self.resultPrice = ko.observable(price);
        self.resultQuantity = ko.observable(quantity || 1);

        self.subtotal = ko.computed(function () {
            return self.resultPrice() * self.resultQuantity();
        });

    };
$('#addProduct').click(function (line) {
            var context = ko.contextFor(this);
            var existing = self.find(line.resultId);
            var lines = self.lines();

            if (existing) {
                existing.resultQuantity = existing.resultQuantity() + context.$data.Quantity();

            }else{
                existing = new CartLine(self.product().productid, self.product().name, self.product().price, context.$data.Quantity());
                self.lines.push(existing);

            }
            return existing;

        });

 self.find = function (productid) {
          return ko.utils.arrayFirst(self.lines(), function (line) {
              return line.resultId === productid;
            });
        };

这是完整的代码：http://jsfiddle.net/pf9hd3Lg/2/

Answer 1

上面列出的代码存在许多错误。以下内容适用于您描述的方案。我试图在下面的代码中评论我的更改。

    var CartLine = function (productid,productName, price, quantity) {
    var self = this;

    self.resultId = ko.observable(productid);
    self.resultProduct = ko.observable(productName);
    self.resultPrice = ko.observable(price);
    self.resultQuantity = ko.observable(quantity || 1);

    self.subtotal = ko.computed(function () {
        return self.resultPrice() * self.resultQuantity();
    });

};


var Cart = function() {

    var self = this;

    self.products = ko.observableArray([{
        "productid": "1",
    "name": "CAPUCINO ",
    "price": 170

},
{
    "productid": "2",
    "name": "Sữa bò tươi",
    "price": 140
}
,

 {
     "productid": "3",
     "name": "Phô mai mặn",
     "price": 170
 }, {
     "productid": "4",
     "name": "Bơ đậu phộng ",
     "price": 150
 },

{
    "productid": "5",
    "name": "Bạc Hà",
    "price": 160
},
{
  "productid": "6",
  "name": "Dâu Tây",
  "price": 160
}

    ]);


    self.product = ko.observable("");
    self.Quantity = ko.observable(1).extend({ numeric: 0 });
    self.price = ko.observable();
    self.productid = ko.observable("");

    self.lines = ko.observableArray();



     self.grandTotal = ko.pureComputed(function () {
        var total = 0;
       $(self.lines()).each(function (index, line) { total += line.subtotal() })
      return total;
     });


    $('#addProduct').click(function (line) {
        var context = ko.contextFor(this);
        var existing = self.find();
        var lines = self.lines();

        if (existing) {
            //existing.resultQuantity is also an observable and should be set this way and not with the = operator
            existing.resultQuantity(existing.resultQuantity() + context.$data.Quantity());

        }else{
            existing = new CartLine(self.product().productid, self.product().name, self.product().price, context.$data.Quantity());
            self.lines.push(existing);

        }
        return existing;

    });

    self.removeProduct = function (line,event) {
        self.lines.remove(line);
    };

    self.find = function () {
      return ko.utils.arrayFirst(self.lines(), function (line) {
        //resultId is an observable
        //self.product().productid is what you are interested in, no need to pass it into the function
        return line.resultId() === self.product().productid;
      });
    };



}

ko.applyBindings(new Cart());

检查现有产品

1 个答案: