Data binding 使用KnockoutJS基于select值对元素进行数据绑定

我想在嵌套的KO数组上进行一些巧妙的绑定，但我真的不知道该怎么做。基于选择中的选择，我希望根据已进行的选择获取一些元素

My 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，价格基于选择的供应商。我将所选的供应商ID传递回我的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>

股票代码
数量
小贩
单价
最小起订量
价值
TODO计算

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

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

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

---

如本例（示例3）所述，我已找到问题的解决方案：

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

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

如本文所述（示例3）