Opzioni a discesa knockout Rendi il callback

Question

Ho sempre usato Il discesa scelto da Harvest che richiede alcuni JS chiamati per essere chiamati su un <select> elemento. Ora sto rendendo le mie liste selezionate con knockout.

Questo è il codice utilizzato per trasformare un menu a discesa standard in un menu a discesa prescelto

$(dropdownSelectorOrElement).Chosen()

ho bisogno di sapere quando Knockout ha finito di rendere il <select>, per chiamare il codice sopra: possibilmente, la funzione di callback dovrebbe fare riferimento al <select> stesso in modo da poter passare senza l'uso di selettori.

Knockout espone il optionsAfterRender callback (documentato qui: vedi "Nota 2") tuttavia:

• optionsAfterRender viene chiamato ogni volta che viene resa un'opzione

• optionsAfterRender Fornisce solo un riferimento all'elemento di opzione

Ho bisogno esattamente di qualcosa di simile optionsAfterRender ma chiamato solo quando l'intero <select> ha finito di rendering. Knockout ha qualcosa di simile?

Ho preparato a jsfiddle che illustra optionsAfterRender.

Answer 1

Ho risolto con questo vincolo personalizzato trovato questa domanda.

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

Nota che se non si utilizza ko.unwrap, la funzione di aggiornamento non si accenderà, come mi è stato detto questo Domanda relativa a questo problema.

Answer 2

Potrebbe anche creare un legame dopo il rendering:

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

Con questa vista:

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

E questo modello di vista:

function viewModel() {

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

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

Vedi violino

Spero possa essere d'aiuto.