0

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

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

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 注释填充所选框之前，knout 绑定了所选值，因此其值设置为 null。然后，一旦选择框被填充，就不会触发更新以更新所选值。

我该如何解决这个问题？

4

1 回答 1

4

您对导致问题的绑定顺序是正确的。不过，有一种方法可以强制后代绑定首先发生。您可以通过创建仅绑定后代的自定义绑定并在绑定之前添加该绑定来做到这一点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/

于 2012-11-21T01:57:32.113 回答