Javascript 如果使用KnockoutJS绑定，则执行嵌套Viewmodel

我想从嵌套视图模型在

中进行绑定时的计算。
我知道如何根据我的视图模型进行标准的
绑定
：

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

我的HTML:

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

<table class="table table-bordered">
                <thead>
                    <tr>
                        <td>Stock Code</td>
                        <td>Qty Required</td>
                        <td>Vendor</td>
                        <td>Vendor Price p/Unit</td>
                        <td>MOQ</td>
                        <td>Qty To Order</td>
                        <td>Value</td>
                    </tr>
                </thead>
                <tbody data-bind="foreach: CheckStock">
                    <tr data-bind="if: RequireVendor">
                        <td data-bind="text: StockCode"></td>
                        <td data-bind="text: (RequiredQtyByBom * QtyOnOrder)">                         
                        </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: SelectedVendor() ? SelectedVendor().VendorPrice : '0'" /></td>
                        <td data-bind="text: SelectedVendor() ? SelectedVendor().VendorMOQ : '0'"></td>
                        <td>TODO CALC</td>
                        <td>TODO CALC</td>
                    </tr>                       
                </tbody>
            </table>


股票代码
所需数量
小贩
供应商价格/单位
最小起订量
订购数量
价值
TODO计算
TODO计算
我猜你是提问者的同事。我正在使用中，它利用了映射插件。正如@BradleyTrager在评论中指出的，您还没有显示您的ViewModel，所以我选择重用提到的fiddle

我觉得在
if
绑定中使用的逻辑很好。但是，由于您将不需要考虑所选内容，因此实际代码将很快包含太多的逻辑，无法在视图中正常运行（在伪代码中）：



因此，我建议将其添加到视图模型中，作为计算：

self.ShowMOQ = ko.computed(function() {
    if (typeof self.SelectedVendor() === 'undefined') { return true; }
    return self.QtyOnOrder() < self.SelectedVendor().VendorMOQ();
});

self.ShowMOQ=ko.computed（函数（）{
if（typeof self.SelectedVendor（）=='undefined'）{return true；}
返回self.QtyOnOrder（）

然后，视图变得非常清晰：

<!-- ko if: ShowMOQ -->



或：



请参阅，以获取可用的演示

请注意，我不知道（也不知道）我是否把这些位放在了小提琴的正确位置，因为你的问题包含了很多与你的问题无关但没有上下文却无法理解的代码。与此相关，我建议将问题中的示例缩小（），这会使其他人更容易回答和帮助。
是否必须在视图中计算？在您的
viewModel
中创建一个
computed observable
似乎更合适。这样应该可以。请发布您的viewModel，以确保所有内容都正确无误。
<!-- ko if: ShowMOQ -->

<!-- ko if: !ShowMOQ() -->