Options de déroulement knockout Rendez le rappel

Question

J'ai toujours utilisé Dropdown choisi de la récolte ce qui nécessite certains js appelés pour être appelé sur un <select> Objet. Maintenant, je rend mes listes sélectionnées avec KO.

Ceci est le code utilisé pour transformer une liste déroulante standard dans une liste déroulante choisie

$(dropdownSelectorOrElement).Chosen()

j'ai besoin de savoir lorsque KO a fini de rendre le <select>, afin d'appeler le code ci-dessus: peut-être, la fonction de rappel doit référencer le <select> lui-même pour que je puisse passer sans l'utilisation de sélecteurs.

Le knockout expose le optionsAfterRender rappel (documenté ici: voir "Note 2") cependant:

• optionsAfterRender est appelé chaque fois qu'une option est rendue

• optionsAfterRender fournit seulement une référence à l'élément d'option

J'ai besoin exactement de quelque chose comme optionsAfterRender mais appelé seulement lorsque tout <select> a terminé le rendu. Le knockout a-t-il quelque chose comme ça?

J'ai préparé un jsfiddle qui illustre optionsAfterRender.

Answer 1

J'ai résolu avec cette reliure personnalisée trouvée sur cette question.

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

Notez que si vous n'utilisez pas ko.unwrap, la fonction de mise à jour ne tirera pas, comme on m'a dit en cette question relative à cette question.

Answer 2

Pourrait également créer une liaison Afterrender:

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

Avec cette vue:

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

Et ce modèle de vue:

function viewModel() {

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

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

Voir le violon

J'espère que ça aide.