基于KnockoutJS的select值的Databind元素

Question

我想对我的嵌套KO数组进行一些巧妙的绑定，但我真的不确定该怎么做。根据select中的选择，我想根据所做的选择获得一些元素。

我的ko观测阵列，看起来像：

{
    "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
}

我想根据选择的供应商数据绑定供应商最小起订量和价格。我将选定的VendorID传回我的视图模型。

   <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

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

通过以下方式对SelectedVendor进行数据绑定，我得到了我想要的结果：

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

如本文所述（示例3）