To NIE działa (wywoływane jest niestandardowe powiązanie, ale lista rozwijana jest pusta)

<select id="parentArea" class="chosen-select" data-bind="
   chosen:{},
   options: parentAreas,
   optionsCaption: 'Choose...',
   optionsText: 'Label',
   value: selectedParentArea">
</select>

Ale to działa (lista rozwijana jest wypełniona)

<select id="parentArea" class="chosen-select" data-bind="
   options: parentAreas,
   optionsCaption: 'Choose...',
   optionsText: 'Label',
   value: selectedParentArea">
</select>

Chciałbym dodać niestandardowe powiązanie do listy rozwijanej, ale nie wiem, jak to zrobić.

Niestandardowe wiązanie jest proste

ko.bindingHandlers.chosen = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        console.log('chosen', element);
        $(element).chosen({});
    }
};

AKTUALIZACJA

.wybrany({});

to metoda z innego fragmentu Javascript (harvesthq.github.io/chosen).

Uświadomiłem sobie, że kiedy jest komentowane, pozostałe wiążące prace. Naprawdę potrzebuję uruchomić „$ (element) .chosen ({});” PO wszystkich innych wykończeniach oprawy.

AKTUALIZACJA 2

Po ręcznym zastosowaniu „wybranego” po zastosowaniu wszystkich powiązań działa dobrze. Np. Mogę użyć przycisku, który uruchamia ten JS

 function run() {
    $('.chosen-select').chosen({});
};    

Po prostu muszę to zrobić automatycznie (funkcja wywołania zwrotnego?), Gdy wszystkie powiązania są zakończone. Nie wiem jak to zrobić.

AKTUALIZACJA 3

„parentAreas” nie jest tablicą statyczną. Jest ładowany z usługi internetowej:

function ViewModel() {

    var self = this;

   self.init = function () {

        //load parent areas from web service
    };

    self.init(); //Running the init code
}

ko.applyBindings( new ViewModel());

Chcę zainicjować niestandardowe wiązanie „wybrane”, gdy obszary nadrzędne są gotowe.

AKTUALIZACJA 4

Nowa wersja (działa, ale nie nadaje się do ponownego użycia, ponieważ ma zakodowane powiązania)

ko.bindingHandlers.chosen = {funkcja init: (element, valueAccessor, allBindingsAccessor, viewModel, context) {

        viewModel.parentAreas.subscribe(function(newParentAreas) {
            if (newParentAreas && newParentAreas.length > 0) {

                ko.applyBindingsToNode(element, {
                    options: viewModel.parentAreas,
                    optionsCaption: 'Choose...',
                    optionsText: 'Label',
                    value: viewModel.selectedParentArea
                });
                $(element).chosen({});
            }
        });
    }
};

// i powiązanie to tylko powiązanie danych = "wybrane: {}

AKTUALIZACJA 5 Unikanie wielokrotnej inicjalizacji (hacky way)

ko.bindingHandlers.parentAreaComboBox = {

    initialised: false,
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, context) {

        viewModel.parentAreas.subscribe(function (newParentAreas) {

            if (newParentAreas && newParentAreas.length > 0) {

                if (ko.bindingHandlers.parentAreaComboBox.initialised) {
                    return;
                }
                ko.applyBindingsToNode(element, {
                    options: viewModel.parentAreas,
                    optionsCaption: 'Choose...',
                    optionsText: 'Label',
                    value: viewModel.selectedParentArea
                });
                $(element).chosen({});
                ko.bindingHandlers.parentAreaComboBox.initialised = true;
            }
        });
    }
};

AKTUALIZACJA 6

Napisałem ogólne rozwiązanie (zobacz moją odpowiedź poniżej)