Question

我想知道是否有人对此代码破坏的原因有任何见解。当我删除返回productID的函数时，tbody data-bind with: chosenProduct正常工作，但是保留函数导致data-bind "value: marketName"抛出一个错误，指出“Uncaught ReferenceError：无法处理绑定“value：function（）{return marketName}”消息：marketName未定义“。这使我认为由于某种原因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，我建议在您的viewmodel上创建一个额外的属性，例如：

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>

KnockoutJS：使用＆＃34;设置optionValue break＆＃34;捆绑

2 个答案: