使用KnockoutJS进行嵌套Viewmodel If Binding

Do nested Viewmodel If Binding with KnockoutJS

本文关键字：Viewmodel If Binding 嵌套 KnockoutJS 使用      更新时间：2023-09-26

我想在嵌套视图模型的if binding中进行计算。我知道如何在我的视图模型的基础上做一个标准的if binding

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

现在我想做以下事情：

  1. 如果是QTYonOrder > SelectedVendor().VendorMOQ，那么我想显示QTYonOrder
  2. 如果是QTYonOrder < SelectedVendor().VendorMOQ，那么我想显示VendorMOQ

是否可以在数据绑定IF中进行这些计算？

我的JSON回复：

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

我的HTML：

<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>

我猜你是问这个问题的人的同事。我正在重新使用我在答案中发布的fiddle，它使用了映射插件。正如@BradleyTrager在评论中所指出的，你还没有显示你的ViewModel，所以这就是为什么我选择重复使用提到的fiddle。

你想在if绑定中使用的逻辑对我来说似乎很好。然而，因为你需要适应任何选择，所以实际代码很快就会包含太多逻辑，在视图中（在伪代码中）都不健康：

<!-- ko: if typeof SelectedVendor() != 'undefined' && 
            QtyOnOrder() < SelectedVendor().VendorMOQ() -->

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

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

然后视图变得非常干净：

<!-- ko if: ShowMOQ -->

或者：

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

看看这个小提琴的工作演示。

请注意，我不知道（也不知道）我是否把这些比特放在了正确的位置，因为你的问题包含了很多与你的问题无关的代码，但如果没有上下文，就无法理解。与此相关的是，我建议你把问题中的例子做得更小（尽可能小），这样别人更容易回答和帮助你。

相关文章：