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

不是使用两个数组并从第二个数据中删除元素，为什么不使用相同的数组，只需添加qty变量并仅在满足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

的 if 绑定

Answer 2

你不能按如下方式增加观察量：

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

如何使用Knockout增加数组项的数量

2 个答案: