Question

我想对我的嵌套KO数组做一些巧妙的绑定，我真的不确定如何做到这一点。基于select的选择，我想根据已经做出的选择得到一些元素。

我的ko obeservablearray，看起来像：

{
    "ProductName": "Product123",
    "RequiredComponents": "CAP 10% H/Vol",
    "StockCode": "142111411",
    "RequiredQtyByBom": 4,
    "QtyUnassignedInWarehouse": 0,
    "QtyAllocatedInWarehouse": 40,
    "PCBReference": "442C",
    "QtyOnOrder": 26,
    "Vendors": [],
    "RequireVendor": false
},
{
    "ProductName": "Product123",
    "RequiredComponents": "Screws",
    "StockCode": "Screws",
    "RequiredQtyByBom": 1,
    "QtyUnassignedInWarehouse": 0,
    "QtyAllocatedInWarehouse": 14,
    "PCBReference": "Screws",
    "QtyOnOrder": 26,
    "Vendors": [
                  {"VendorID": "3", 
                  "VendorName": "ABC Supplier",
                  "VendorMOQ": 50000,
                  "VendorItemPrice": 322},
                  {"VendorID": "4", 
                  "VendorName": "DEF Supplier",
                  "VendorMOQ": 4,
                  "VendorItemPrice": 120}
               ],
    "RequireVendor": true
},
{
    "ProductName": "Product123",
    "RequiredComponents": "14141415",
    "StockCode": "151555231",
    "RequiredQtyByBom": 1,
    "QtyUnassignedInWarehouse": 0,
    "QtyAllocatedInWarehouse": 170,
    "PCBReference": "1414",
    "QtyOnOrder": 26,
    "Vendors": [],
    "RequireVendor": false
}

我想根据选择的供应商数据绑定供应商MOQ，价格。我将selectedVendorID传递回我的viewmodel。

   <select data-bind="options: Vendors, optionsText: 'VendorName', optionsCaption: 'Choose a Vendor...', value: SelectedVendor" class="form-control"></select>

我希望我的输出如下所示：

   <table class="table table-bordered">
                    <thead>
                        <tr>
                            <td>Stock Code</td>
                            <td>Qty</td>
                            <td>Vendor</td>
                            <td>Price p/Unit</td>
                            <td>MOQ</td>
                            <td>Value</td>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: CheckStock">
                        <tr>
                            <td data-bind="text: StockCode"></td>
                            <td data-bind=""></td>
                            <td>
                                <select data-bind="options: Vendors, optionsText: 'VendorName', optionsCaption: 'Choose a Vendor...', value: SelectedVendor" class="form-control"></select>
                            </td>
                            <td>
                                <input type="text" data-bind="value: Vendors().VendorPrice" /></td>
                            <td data-bind="text: Vendors().VendorMOQ"></td>
                            <td>TODO CALC</td>
                        </tr>
                    </tbody>
                </table>

Answer 1

我找到了解决问题的方法：

通过Data以下面的方式绑定SelectedVendor，我得到了我正在寻找的结果：

  <input type="text" data-bind="value: SelectedVendor() ? SelectedVendor().VendorPrice : '0'" /></td>
  <td data-bind="text: SelectedVendor() ? SelectedVendor().VendorMOQ : '0'"></td>

如本Article（例3）所述

数据绑定元素基于KnockoutJS的选择值

1 个答案: