1

selectedValue我有一个值为“ham”的选择的预设值。我有 3 个选项“垃圾邮件”、“火腿”、“奶酪”。

当应用视图模型时，“火腿”值被选中，但selectedValue失去了它的价值，所以“火腿”实际上并没有被选中，尽管它看起来是。

我需要更改什么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的重复绑定。我通常会使用常规选项绑定，但我需要重复绑定才能使选择标签起作用。

4

1 回答 1

3

有几种不同的方法可以处理这个问题。我认为一种简单的方法是使用自定义绑定，首先将绑定应用于其子项。

这是一个例子：

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/

于 2013-08-15T16:41:15.490 回答