knockout.js - 选择选项文本后绑定错误

Question

这是一个下拉列表和另一个检查绑定的元素：

<select data-bind = 
    "options: chains,
    optionsText: function (item) { return item.BusinessModel['Name'] },
    optionsCaption: 'Select...', 
    value: selectedChain">
</select>
<div data-bind = "text: selectedChain().Id"></div>

viewModel 和初始化如下所示：

function ViewModel() {
    this.chains = null;
    this.selectedChain = ko.observable();
}

$.ajax({
    url: "@Url.Action("Chains", "GetAll")",
    success: function (result) {
        var model = new ViewModel();
        model.chains = result;
        model.selectedChain(result[0]); // Why?
        ko.applyBindings(model);
    }
});

一旦在组合框中选择了optionsCaption(" Select... ")，绑定将不再工作（不会重置引用元素中的旧值/新值集）。这就是为什么我需要初始化selectedChain. null在我看来，设置为 selectedValue有什么问题吗？！

有人可以告诉我我做错了什么吗？

Answer 1

您的第二次绑定text: selectedChain().Id有问题 - 如果您选择“选择...”选项，那么selectedChain' 的值是未定义的，您不能.Id在未定义的情况下执行此操作。您需要为此添加检查，例如：

<!-- ko if: selectedChain -->
    <div data-bind="text: selectedChain().Id"></div>
<!-- /ko -->

或者：

<div data-bind="text: selectedChain() && selectedChain().Id"></div>

示例：http: //jsfiddle.net/FLD2V/