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 が選択されたボックスを埋める前にノックアウトが選択された値をバインドしているため、その値が 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 に答える