Knockout.js - 为foreach中的每个项目添加数量选项

时间:2014-07-12 09:42:17

标签: knockout.js

我有一个可观察的阵列"产品"包括产品对象,产品对象使用foreach绑定打印。我想要的是在每个产品行旁边插入一个输入框以及一个添加到购物车按钮,以便用户可以选择每个产品的数量以及所有这些信息添加到购物车。我怎样才能做到这一点?

请帮忙,我是knockout.js的新手。在这里小提琴:http://jsfiddle.net/PGh6y/1/

1 个答案:

答案 0 :(得分:2)

您需要向Product对象添加quantity observable property

var Product = function (id, name, price)
{
    this.id = id;
    this.name = name;
    this.price = price;
    this.quantity = ko.observable(1);   
};

然后,您需要使用输入中的value binding来修改quantity

<input id="quantity" type="number" min="1" data-bind="value: quantity" />

最后在您的addToCart you can get the current item as the first parameter方法中,您只需要创建一个新的orderedItem并推送到orderedItems个集合中:

self.addToCart = function (product) {
  self.orderedItems.push(
   new orderedItem(product.id, product.name, product.price, product.quantity()));
};

演示JSFiddle

注意:我还修复了第二个表中的removeFromCart和错误的属性名称。