javascript - 使用注释循环选项时 knockout 重置值

Question

示例问题:http://jsfiddle.net/whxD3/12/

在 knockout 中，我有一个选择框，我想在其中使用 optgroups。这个选择框可以根据您当前所在的“部分”进行反弹。我发现由于敲击执行其绑定(bind)顺序的方式，出现以下问题:

HTML:

    <div>
        <a href="#" data-bind="click: page1">Section 1</a>
        <a href="#" data-bind="click: page2">Section 2</a>
    </div>
    <hr/>
    <div data-bind="with: activepage">
        <select data-bind="value: selectedItem">
            <optgroup label="Items">
                <!-- ko foreach: items()  -->
                <option data-bind="value: $data, text: $data"></option>
                <!-- /ko -->
            </optgroup>
            <optgroup label="Constants">
                <option value="foo">foo</option>
            </optgroup>
        </select>
        <br/><br/>
        Selected Item:&nbsp;<span data-bind="text: selectedItem"></span>
    </div>

JavaScript:

        function SubPageViewModel(name) {
            this.name = name;
            this.items = ko.observableArray(["one", "two", "three"]);
            this.selectedItem = ko.observable();
        }

        function PageViewModel() {
            this.pages = [new SubPageViewModel("page1"), new SubPageViewModel("page2")];
            this.activepage = ko.observable(this.pages[0]);

            this.page1 = function() { this.activepage(this.pages[0]); }
            this.page2 = function() { this.activepage(this.pages[1]); }
        }

        ko.applyBindings(new PageViewModel());

• 因为我使用 foreach 注释来填充选择框，所以即使选择了某个项目，数据绑定(bind)的下拉列表的所选值最初也会为 null

• 当您离开当前部分并返回时，所选值将重置为 null。

我相信发生这种情况是因为在注释 foreach 填充所选框之前，knockout 会绑定(bind)所选值，因此其值设置为 null。然后，一旦选择框被填充，就不会触发更新来更新所选值。

如何解决这个问题？

Answer 1

您关于绑定(bind)顺序导致问题的说法是正确的。不过，有一种方法可以强制后代绑定(bind)首先发生。您可以通过创建仅绑定(bind)后代的自定义绑定(bind)并将该绑定(bind)添加到 value 绑定(bind)之前来实现此目的。

这是自定义绑定(bind):

ko.bindingHandlers.bindContents = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        ko.applyBindingsToDescendants(bindingContext, element);
        return { controlsDescendantBindings: true };
    }
};

使用方法如下:

<select data-bind="bindContents: true, value: selectedItem">

这是使用此示例(以及其他清理)的示例:http://jsfiddle.net/mbest/whxD3/14/