Question

我有一个select selectedValue的预设值，其值为“ham”。我有3个选项“垃圾”，“火腿”，“奶酪”。

当应用视图模型时，“ham”值被选中，但selectedValue会丢失它的值，因此实际上并未选择“ham”，尽管它似乎是。

我需要更改哪些内容才能让selectValue保留其初始值？这是jsfiddle

HTML

<select data-bind="value:selectedValue">
   <option data-bind="repeat: values" 
        data-repeat-bind="value: $item(), text: $item()">
   </option>
</select>
<br>selectedValue: <span data-bind="text:selectedValue"></span>

视图模型

var viewModel = function () {
    this.selectedValue = ko.observable("ham"); //initial value has been chosen.
    this.values = ko.observableArray(["spam", 'ham', 'cheese']);
    this.showMeSelectedValue = function(){alert(this.selectedValue())};
};

ko.applyBindings(new viewModel());

注意： 我正在使用https://github.com/mbest/knockout-repeat的重复绑定。我通常会使用常规选项绑定，但我需要重复绑定才能使选择标签起作用。

Answer 1

您可以通过几种不同的方式来处理这个问题。我认为一种简单的方法是使用首先将绑定应用于其子节点的自定义绑定。

以下是一个例子：

ko.bindingHandlers.bindChildren = {
    init: function(element, valueAcessor, allBindings, vm, bindingContext) {
        //bind children first
        ko.applyBindingsToDescendants(bindingContext, element);

        //tell KO not to bind the children itself
        return { controlsDescendantBindings: true };
    }
};

现在，您可以指定：

<select data-bind="bindChildren: true, value: selectedValue">
    <option data-bind="repeat: values" data-repeat-bind="value: $item(), text: $item()"></option>
</select>

以下是一个示例：http://jsfiddle.net/rniemeyer/r9kPm/

具有重复绑定的敲除：最初选择的值被覆盖

1 个答案: