Opciones desplegables de Knockout Renderbrezca

Question

Siempre he usado El menú desplegable elegido de Harvest que requiere que algunos JS llamen a ser llamado en un <select> artículo. Ahora, estoy ofreciendo mis listas de selección con Knockout.

Este es el código utilizado para transformar un menú desplegable estándar en un menú desplegable elegido

$(dropdownSelectorOrElement).Chosen()

necesito saber cuando Knockout ha terminado de representar el <select>, para llamar al código anterior: posiblemente, la función de devolución de llamada debe hacer referencia a la <select> en sí mismo para que pueda pasar sin el uso de selectores.

Knockout expone el optionsAfterRender devolución de llamada (documentada aquí: ver "Nota 2") Sin embargo:

• optionsAfterRender se llama cada vez que se representa una opción

• optionsAfterRender Proporciona solo una referencia al elemento de opción

Necesito exactamente algo como optionsAfterRender pero llamado solo cuando todo <select> ha terminado de renderizar. ¿Knockout tiene algo como esto?

He preparado un jsfiddle que ilustra optionsAfterRender.

Answer 1

He resuelto con este enlace personalizado que se encuentra en esta pregunta.

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

Tenga en cuenta que si no usa ko.unwrap, la función de actualización no disparará, como me ha dicho en este Pregunta relacionada con este problema.

Answer 2

También podría crear una vinculación posterior:

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

Con esta vista:

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

Y este modelo de vista:

function viewModel() {

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

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

Ver violín

Espero que ayude.