Knockout Dropdown -Optionen rendern Rückrufe

Question

Ich habe immer benutzt Harvests gewählter Dropdown Dies erfordert einige JS, die aufgerufen werden sollen <select> Artikel. Jetzt mache ich meine ausgewählten Listen mit Knockout.

Dies ist der Code, der verwendet wird, um einen Standard Dropdown in einem ausgewählten Dropdown zu transformieren

$(dropdownSelectorOrElement).Chosen()

ich muss wissen Wenn Knockout hat das Rendern der Rendern <select>, Um den obigen Code aufzurufen: Möglicherweise sollte die Rückruffunktion auf die Verweise auf die <select> selbst, damit ich ohne die Verwendung von Selektoren passieren kann.

Knockout enthüllt die optionsAfterRender Rückruf (dokumentiert hier: Siehe "Anmerkung 2") jedoch:

• optionsAfterRender wird jedes Mal aufgerufen, wenn eine Option gerendert wird

• optionsAfterRender Bietet nur einen Verweis auf das Optionselement

Ich brauche genau so etwas wie optionsAfterRender aber nur dann angerufen, wenn der gesamte <select> hat das Rendering fertig. Hat Knockout so etwas?

Ich habe a vorbereitet jsfiddle was zeigt optionsAfterRender.

Answer 1

Ich habe mit dieser benutzerdefinierten Bindung gelöst diese Frage.

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

Beachten Sie das, wenn Sie nicht verwenden ko.unwrap, Die Aktualisierungsfunktion wird nicht ausfeuern, wie es mir in mir gesagt wurde Dies Frage in Bezug auf dieses Problem.

Answer 2

Könnte auch eine Nachsrender -Bindung erzeugen:

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

Mit dieser Ansicht:

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

Und dieses Ansichtsmodell:

function viewModel() {

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

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

Siehe Geige

Ich hoffe, es hilft.