如何在 KnockoutJS 中选择单个 cartItems 的数量

Question

您好，我是个新手，我试图让我的数组 cartItems 从下拉列表中自动选择它们的数量。这是我的代码：

查看

<div data-bind="foreach: cartItems">
   <h3 data-bind="text: fullname"></h3>
   <p data-bind="text: sku"></p>
   <select data-bind="quantityDropdown: number"></select>
</div>

视图模型

var number = 50;
ko.bindingHandlers.quantityDropdown = {
    update: function (element) {
        for (var i = 1; i < number + 1; i++) {
            var selectedQty = "";

            for (var x = 0; x < self.cartItems().length; x++) {
                var itemqty = parseFloat(self.cartItems()[x].qty, 10);

                if (i === itemqty) {
                    selectedQty = " selected='selected'";
                }
            }
            // Add each option element to the select here
            $(element).append("<option value='" + i + "' " + selectedQty + " class='quantity'>" + i + "</option>");
        }
    }
};

现在我将两件商品放入购物车，然后出现下拉菜单。但是购物车中的两个项目的“选定”编号是相同的吗？我知道它是因为它不是特定于项目的。但我不确定如何在 Knockoutjs 中使其成为特定项目。

Answer 1

工作示例： http://jsfiddle.net/GSvnh/5085/


查看：

 <div data-bind="foreach: CartItems">
     <h3 data-bind="text: FullName"></h3>
      <p data-bind="text: Sku"></p>
      <select name="qty" class="form-control" data-bind="foreach: QuantityDropdown ,value:SelectedQuantity">
    <option data-bind="value: Value,text:Name"></option>
  </select>
</div>

虚拟机：

  $(function () {
    var MainViewModel = function () {
    var self = this;
    self.CartItems = ko.observableArray([]);
    //For example you get below array of objects as response
    var response = [{ fullname: "ABC", sku: "1234567789", qty: 12 },
                    { fullname: "AAA", sku: "2323227789", qty: 20 },
                    { fullname: "BBB", sku: "2311227789", qty: 33 }
    ];

    //you map your response and for each item you create a new CartItemViewModel   
    self.CartItems($.map(response, function (item) {
      return new CartItemViewModel(item);
    }));

    }

    var CartItemViewModel = function (data) {
     var self = this;
     var number = 50;
     self.FullName = ko.observable(data.fullname);
     self.Sku = ko.observable(data.sku);
     self.QuantityDropdown = ko.observableArray();

     for (var i = 1; i < number + 1; i++) {
       self.QuantityDropdown.push({ Value: i, Name: i });
     }
     self.SelectedQuantity = ko.observable(parseFloat(data.qty, 10));
     self.SelectedQuantity.subscribe(function (newValue) {
        alert("selected Qty : "+  newValue);
     })
   }
   ko.applyBindings(new MainViewModel());

  })