0

20行のデータを表示するknockout.jsビューがあります。各行には、knockout.js にバインドされた select 2 コントロールがあります。(以下に、私のバインディング ハンドラーを示します)

次に、アイテムの同じ配列への 2 つのポイントをそれぞれ選択します。この配列には約 10.000 のエントリがあります。これにより、ページ全体の速度が低下します (約 2 ～ 3 秒のフリーズ時間)。

ユーザーが行をクリックしたときにのみオプションをロードすることを考えています。このような：

 self.setSelectedRow = function (entry) {
        entry.options(allOptions);
        var value = entry.intialValue;
        entry.StationdId(value);
    };

この後、select 2 は展開可能になり、オプションを選択できますが、初期値は適用されません。私が間違っていることについてのヒントはありますか？

バインディング ハンドラ:

ko.bindingHandlers.select2 = {
    init: function (el, valueAccessor, allBindingsAccessor, viewModel) {
        ko.utils.domNodeDisposal.addDisposeCallback(el, function () {
            $(el).select2('destroy');
        });

        var allBindings = allBindingsAccessor(),
            select2 = ko.utils.unwrapObservable(allBindings.select2);

        $(el).select2(select2);
    }
};
4

2 に答える 2

1

非常に古いバージョンを使用していない限りknockout、バインディング構文が間違っていると思います。

この部分は間違っています:

var allBindings = allBindingsAccessor(),
  select2 = ko.utils.unwrapObservable(allBindings.select2);

http://knockoutjs.com/documentation/custom-bindings.htmlを読む と、正しい使用方法allBindingsAccessor(とにかく allBindings という名前にする必要があります) は次のとおりです。

var select2 = allBindingsAccessor.get('select2') || {};

しかし、これは不要でも、valueAccessor は現在のバインド ( select2) の下にあるものを提供します。

だからこれを試してみてください：

ko.bindingHandlers.select2 = {
    init: function (el, valueAccessor, allBindingsAccessor, viewModel) {
        ko.utils.domNodeDisposal.addDisposeCallback(el, function () {
            $(el).select2('destroy');
        });

        $(el).select2(ko.unwrap(valueAccessor()));
    }
};
于 2014-07-17T12:44:19.593 に答える
1

通常、バインディング ハンドラーには次の 2 つの機能があります。

  • バインディングが作成されたときに呼び出されるinit関数 (バインディングを作成/再作成するたびに呼び出されるため、複数回呼び出すことができることにif注意してください。例: ノードがバインディング内にある場合)。この関数には、バインディングをセットアップするためのコードが含まれている必要があります (これはうまくいきました)。
  • updateバインディング マークアップ内のオブザーバブルが変更されるたびに呼び出される関数。この関数は init でも (init関数の直後に) 呼び出されるため、場合によってはinit関数が必要ないことに注意してください。

custom詳しくはbinding docをご覧ください。

initあなたの場合、機能は問題ないと思います。

問題は、オブザーバブルの変更を処理するために何も設定されていないことです。

update次のような関数を追加できます( untested ):

ko.bindingHandlers.select2 = {
    init: function (el, valueAccessor, allBindingsAccessor, viewModel) {
        /* your code is fine */
    },
    update: function (el, valueAccessor, allBindingsAccessor, viewModel) {
        var allBindings = allBindingsAccessor(),
            select2 = ko.utils.unwrapObservable(allBindings.select2);
        $(el).select2(select2); //update the select2
    }
};
于 2014-07-17T10:22:17.517 に答える