2

我想在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>
4

1 回答 1

2

我猜你是问这个问题的人的同事。我正在重新使用我在答案中发布的小提琴，它利用了映射插件。正如@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() -->

请参阅此小提琴以获取工作演示。

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

于 2013-08-31T13:02:36.367 回答