ノックアウトドロップダウンオプションレンダリングコールバック

Question

私はいつも使用しています ハーベストが選んだドロップダウン これは、に呼ばれるように呼ばれるいくつかのJSを必要とします <select> アイテム。今、私はノックアウトで私の選択リストをレンダリングしています。

これは、選択したドロップダウンの標準ドロップダウンを変換するために使用されるコードです

$(dropdownSelectorOrElement).Chosen()

私は知る必要がある いつ ノックアウトはレンダリングを終了しました <select>, 、上記のコードを呼び出すために：おそらく、コールバック関数は <select> セレクターを使用せずに通過できるようにそれ自体。

ノックアウトが公開します optionsAfterRender コールバック（文書化 ここ: ：「注2」を参照してください）。

• optionsAfterRender オプションがレンダリングされるたびに呼び出されます

• optionsAfterRender オプション要素への参照のみを提供します

まさにそのようなものが必要です optionsAfterRender しかし、全体が場合にのみ呼び出されました <select> レンダリングが終了しました。ノックアウトにはこのようなものがありますか？

準備しました jsfiddle これを示しています optionsAfterRender.

Answer 1

私はこのカスタムバインディングで見つかったことで解決しました この質問.

ko.bindingHandlers.chosen = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {

        $(element).chosen();
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = ko.unwrap(valueAccessor()); // - see comment
        $(element).trigger("liszt:updated");
    }
};

使用しない場合は注意してください ko.unwrap, 、更新機能は私に言われたように発火しません これ この問題に関する質問。

Answer 2

アフターレンダーバインディングを作成することもできます。

ko.bindingHandlers.afterRender = {
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        allBindings.get('afterRender').call(viewModel, element);
    }
};

この見解で：

<select data-bind="
options: Options,
value: selection,
optionsText: 'text',
optionsValue: 'value',
afterRender: renderCallback
"></select>
<span data-bind="text: selection"></span>

そして、このビューモデル：

function viewModel() {

    this.renderCallback = function (selectElement) {
        console.log('call');
    };

    this.Options = [{
        text: "abee",
        value: "123"
    } ...
};

フィドルを参照してください

私はそれが役立つことを願っています。