Question

在淘汰赛中，我有一个选择框，我想使用optgroups。这个选择框可以反弹，这取决于你当前所处的“部分”。我发现由于knock正在执行其绑定顺序的方式发生以下问题：

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来填充选择框，所以即使选择了某个项目，数据也会将所选下拉列表的值绑定为null
当您离开当前部分并向后导航时，所选值将重置为null。

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

如何解决这个问题？

Answer 1

您对导致问题的绑定顺序是正确的。但是，有一种方法可以强制后代绑定首先发生。您可以通过创建一个自定义绑定来实现此目的，该绑定仅绑定后代并在value绑定之前添加该绑定。

这是自定义绑定：

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/

使用注释循环选项时，Knockout重置值

1 个答案: