Question

我最近开始使用KnockOut，所以我对此非常陌生。我已经完成了他们网站上的每个教程，但却无法使用这个特定的东西。

我需要数组，左边是所有项目，右边是你选择的项目。

点击项目（左表）后，它应该.push到右边的表格

视图模型：

var orderedItemsTable = $("form.orderedDataWithoutBatch")

var viewModel = {
    //right side
    orderedItems: ko.observableArray(),

    //Left side
    items: ko.observableArray(),
    sortColumn: ko.observable(),
    total: ko.observable(),
}

request.done(function (data) {
     item.addItem = function () {
                alert("item clicked, materiaal id: " + this.MateriaalId);//works
                alert(this.MateriaalDescription);//works
                viewModel.orderedItems.push(this);//doesn't 'work'
        }

            viewModel.items.push(item);//unrelated to this context
     }

我假设它在这里的代码中，或者我没有在我的html中正确显示它（因为我没有得到任何控制台错误）

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 data-bind="foreach: orderedItems">
        <tr>
            <td data-bind="text: MateriaalSku"> </td>
            <td data-bind="text: MateriaalDescription"> </td>
            <td data-bind="text: MateriaalId"><!-- Quantity--> </td>
            <!--<td><input class="orderedQty" style="max-width: 15%" value="1" />[pieces]</td>-->
            <td><a href="#">Remove</a></td>
        </tr>
    </tbody>
</table>

Answer 1

我不确定我是否理解你，但我会以这种方式解决你的任务：

var orderedItemsTable = $("form.orderedDataWithoutBatch")

var viewModel = {
    //right side
    orderedItems: ko.observableArray(),

    //Left side
    items: ko.observableArray(),
    sortColumn: ko.observable(),
    total: ko.observable(),
}

function proscessRequest(item) {
     item.addItem = function () {
          //alert("item clicked, materiaal id: " + this.MateriaalId);//works
          //alert(item.MateriaalDescription);//works
          viewModel.orderedItems.push(this);//doesn't 'work'
     }

     viewModel.items.push(item);//unrelated to this context
}

ko.applyBindings(viewModel);

proscessRequest({MateriaalSku: "M1", MateriaalDescription: "D1", MateriaalId: "1"});
proscessRequest({MateriaalSku: "M2", MateriaalDescription: "D2", MateriaalId: "2"});
proscessRequest({MateriaalSku: "M3", MateriaalDescription: "D3", MateriaalId: "3"});
proscessRequest({MateriaalSku: "M4", MateriaalDescription: "D4", MateriaalId: "4"});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form id="OrderedItemsWithoutBatch" class="orderedDataWithoutBatch">
  <div>Alavilable items:</div>
<div>
  <table class="orderFormArticlesTable">
    <thead>
        <tr>
            <th>SKU</th>
            <th>Product</th>
            <th style="width: 15%">Qty</th>
            <th></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: items">
        <tr>
            <td data-bind="text: MateriaalSku"> </td>
            <td data-bind="text: MateriaalDescription"> </td>
            <td data-bind="text: MateriaalId"><!-- Quantity--> </td>
            <td><div data-bind="click: addItem">Add</div></td>
        </tr>
    </tbody>
</table>
</div>

  <div style="margin-top: 30px;">
  <div>Ordered items:</div>
    <table class="orderFormArticlesTable">
    <thead>
        <tr>
            <th>SKU</th>
            <th>Product</th>
            <th style="width: 15%">Qty</th>
            <th></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: orderedItems">
        <tr>
            <td data-bind="text: MateriaalSku"> </td>
            <td data-bind="text: MateriaalDescription"> </td>
            <td data-bind="text: MateriaalId"><!-- Quantity--> </td>
            <td><div data-bind="click: function() { $parent.orderedItems.remove($data); }">Remove</div></td>
        </tr>
    </tbody>
</table>
</div>
</form>

注意

我在使用绑定后调用了“proscessRequest”函数来模拟请求。

淘汰赛：无法推进观察阵容

1 个答案:

注意