如何用Knockout增加數組項目的數量

Question

我有兩個表格。左側包含所有物品，右側顯示訂購物品。 （見圖片）

我想要做什麼： 如果來自左表項目右側表已經增加，而不是重新添加，只是一個，而不是增加數量。如果不是這種情況，只需添加它..

代碼： HTML

<form id="OrderedItemsWithoutBatch" class="orderedDataWithoutBatch"> 
<table class="orderFormArticlesTable" style="width: 47%;float: right; font-size: 9pt;"> 
    <thead> 
     <tr> 
      <th>SKU</th> 
      <th>Product</th> 
      <th style="width: 15%">Qty</th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody id="orderedItemsVM" data-bind="foreach: orderedItems"> 
     <tr class="clickable" data-bind="css: { alternate: $index()%2 }"> 
      <td data-bind="text: MateriaalSku"> </td> 
      <td data-bind="text: MateriaalDescription"> </td> 
      @*<td class="onelineData"><input style="width:2em" type="text" /> [pieces] </td>*@ 
      <td><input class="orderedQty" style="max-width: 15%" data-bind="value: materiaalAantal"/>[pieces]</td> 
      <td data-bind="click: function() { $parent.orderedItems.remove($data); }"><a href="#">Remove</a></td> 
     </tr> 
    </tbody> 
</table> 

JS

$(document).ready(function() { 
var dataTableForm = $("form.dataWithoutBatch"); 
var orderedItemsTable = $("form.orderedDataWithoutBatch"); 
var dataReloading = false; 
var currentPage = 0; 

//viewModel 
var viewModel = { 
    orderedItems: ko.observableArray(), 
    items: ko.observableArray(), 
    sortColumn: ko.observable(), 
    total: ko.observable() 
} 

var request = $.post(url, postData); 
    request.fail(function() { 
     alert('Failed!'); 
    }); 
    request.always(function() { 
     listItemsParameterInputs.prop('disabled', false); 
     $(document.body).removeClass("loading"); 

     dataReloading = false; 

     if (callback) { 
      callback(); 
     } 
    }); 
    request.done(function (data) { 
     viewModel.total(data.Total); 
     viewModel.items.removeAll(); 

     for (var index = 0; index < data.Items.length; index++) { 
      var item = data.Items[index]; 

      if (item.hasOwnProperty("qty")) { 
       item.qty = ko.observable(item.qty); 
      } 
      else { 
       item.qty = ko.observable(""); 
      } 
      item.addItem = function() { 
       //Check if item is already in the table on the right 
       if(viewModel.orderedItems.indexOf(this) < 0){ 
        viewModel.orderedItems.push(this); 

       } 
       else{ 
        // Increase quantity by one. 
       } 
      } 
      viewModel.items.push(item); 
     } 

Answer 1

廣東話你剛剛增加的數量你可觀察到如下：

... 
else { 
    // Increase quantity by one. 
    this.qty(this.qty() += 1) 
} 

Answer 2

而不是使用兩個數組，並從第二除去元素，你爲什麼不使用相同陣列，只需添加數量變量和顯示線，只有滿足qty()>0

這樣，你只需在this.qty(this.qty()+1);的第一個表格中將qty的值加1，並在單擊remove時將該值設置爲0。

代碼爲你的第二個表應該是這個樣子：

<tbody id="orderedItemsVM" data-bind="foreach: items"> 
    <!-- ko if: qty()>0 --> 
    <tr class="clickable" > 
     <td data-bind="text: MateriaalSku"> </td> 
     <td data-bind="text: MateriaalDescription"> </td> 
     <td> 
      <input style="width:2em" type="text" data-bind="value:qty"/> 
      [pieces] 
     </td> 
     <td><a data-bind="click: function() { qty(""); }">Remove</a></td> 
    </tr> 
    <!-- /ko --> 
</tbody> 

更多的如果在http://knockoutjs.com/documentation/if-binding.html