Opções suspensas de knockout renderize retorno de chamada

Question

Eu sempre usei Suspenso escolhido pela colheita que requer alguns JS chamados para serem chamados em um <select> item. Agora, estou renderizando minhas listas selecionadas com nocaute.

Este é o código usado para transformar um suspensão padrão em um suspensão escolhida

$(dropdownSelectorOrElement).Chosen()

eu preciso saber quando Knockout terminou de renderizar o <select>, para chamar o código acima: possivelmente, a função de retorno de chamada deve fazer referência ao <select> por si só para que eu possa passar sem o uso de seletores.

Knockout expõe o optionsAfterRender retorno de chamada (documentado aqui: Consulte "Nota 2") No entanto:

• optionsAfterRender é chamado toda vez que uma opção é renderizada

• optionsAfterRender fornece apenas uma referência ao elemento de opção

Eu preciso exatamente de algo como optionsAfterRender mas chamado apenas quando o inteiro <select> terminou de renderizar. O nocaute tem algo assim?

Eu preparei um jsfiddle que ilustra optionsAfterRender.

Answer 1

Eu resolvi com esta ligação personalizada encontrada em essa questão.

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");
    }
};

Observe que se você não usar ko.unwrap, a função de atualização não será demitida, como me foi dito em isto Pergunta relacionada a esse problema.

Answer 2

Também poderia criar uma ligação após o ré:

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

Com esta visão:

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

E esse modelo de visualização:

function viewModel() {

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

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

Veja violino

Espero que ajude.