Question

我想在嵌套视图模型的if binding内进行计算。我知道如何根据我的视图模型执行标准if binding：

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

现在我想做以下事情：

如果QTYonOrder > SelectedVendor().VendorMOQ，那么我想显示QTYonOrder
如果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>

Answer 1

我猜你是那个问this other question的人的同事。我在使用映射插件的the fiddle I posted there中重新使用my answer。正如@BradleyTrager在评论中指出的那样，你没有展示你的ViewModel，所以这就是为什么我选择重用上面提到的小提琴。

您想要在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() -->

有关正常工作的演示，请参阅this fiddle。

请注意，我不会（并且不能）知道我是否已将这些位放在小提琴中的正确位置，因为您的问题包含许多与您的问题无关的代码但不可能理解没有上下文。与此相关的我建议您将问题的示例缩小（as small as possible），以便其他人更容易回答和帮助。

嵌套Viewmodel如果与KnockoutJS绑定

1 个答案: