1

私は常にHarvest の Chosen ドロップダウン<select>を使用してきました。これには、アイテムで呼び出されるいくつかの js が必要です。現在、選択リストを Knockout でレンダリングしています。

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

$(dropdownSelectorOrElement).Chosen()

上記のコードを呼び出すには、Knockout が のレンダリングをいつ終了したかを知る必要があります。おそらく、セレクターを使用せずに渡すことができるように、コールバック関数はそれ自体を参照する必要があります。<select><select>

ノックアウトはコールバックを公開します (ここにoptionsAfterRender文書化されています: 「注 2」を参照)。

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

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

まったく同じようなものが必要ですが、全体のレンダリングが終了しoptionsAfterRenderたときにのみ呼び出されます。<select>ノックアウトってこんなもんなの？

を説明するjsfiddleを用意しましたoptionsAfterRender。

4

2 に答える 2

2

この質問にあるこのカスタムバインディングで解決しました。

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質問で私に言われたように、を使用しない場合、更新機能は起動しないことに注意してください。

于 2013-11-08T09:42:36.797 に答える
1

afterRender バインディングを作成することもできます:

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>

そして、このViewモデル：

function viewModel() {

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

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

フィドルを見る

お役に立てば幸いです。

于 2013-11-08T10:10:59.230 に答える