KnockoutJS：设置 optionValue 打破“与”绑定

Question

我想知道是否有人知道为什么这段代码会被破坏。当我删除返回 productID 的函数时，tbody data-bind with: chosenProduct 可以正常工作，但将函数保留在中会导致 data-bind "value: marketName" 抛出一个错误，指出 "Uncaught ReferenceError: Uncaught ReferenceError: Unable to process binding "value: function (){return marketName }" Message: marketName is not defined "。 这让我觉得由于某种原因chosenProduct 没有被设置为选择时的值。

HTML：

<table>
    <tr><td><label>Product Name</label></td><td><select id="productSelect" data-bind="options: products, optionsCaption: 'Choose Product',optionsValue: function(i){ return i.productID }, optionsText:'productName', value: chosenProduct, valueUpdate: 'keyup'"></select></td></tr>
    <tbody data-bind="with: chosenProduct">
        <tr><td><label>Market</label></td><td><input type="text" readonly data-bind="value: marketName"></td></tr>
        <tr><td><label>Client</label></td><td><input type="text" readonly data-bind="value: clientName"></td></tr>
    </tbody>
</table>

Javascript：

this.products = /* ajax call returns array of product objects*/;
chosenProduct = ko.observable();
    resetProduct = function() { this.chosenProduct(null);};

一个产品对象：

{productID: 1, marketName: "Test", clientName: "Client1"}

Answer 1

这是您对optionsValue setting的使用。

通过使用它，您是在告诉 knockout 将被选择事物的实际值设置为产品 ID。这只是一个数字，没有marketName 和clientName 属性。解决方案是将其移除。 Knockout 非常适合以这种方式选择事物 - 如果您需要在其他地方选择产品的实际 ID，我建议在您的视图模型上创建一个额外的属性，例如：

this.ChosenProductID = ko.computed(function() {
    if (this.chosenProduct() != null)
        return this.chosenProduct().productID;

    return -1;
}, this);

Answer 2

如果您需要保留 optionsValue 绑定，以便 chosenProduct 纯粹是一个可读取/可写的 ID，因此您可以在 javascript 的其他位置设置它，我的其他答案的替代方法是创建一个 computed observable仅显示当前产品。然后可以在模板绑定中使用它：

this.chosenProductObject = ko.computed(function() {
    for (x = 0; x < this.products.length; x++)
        if (this.products[x].productID == this.chosenProduct())
            return this.products[x];
    return null;
}, this);

对您的 html 进行微调：

<tbody data-bind="with: chosenProductObject">
    <!-- as before -->
</tbody>