Come ordinare gli attacchi a strappo?

Question

Sto usando knockout.js. Sono bloccato in una situazione un po 'strana (è difficile da spiegare ma ci sto provando, scusa se non sono chiaro). Sto usando personalizzato vincolante e opzioni di rilegatura su un unico SelectList:

<select data-bind="options : arrayOfOptions, optionsText: 'Name', 
      optionsValue: 'Name', chosen: { }"> 
    </select> 

ko.bindingHandlers.chosen = { 
    init: function (element, valueAccessor, allBindingAccessor, 
        viewModel, bindigContext) { 
     var options = ko.utils.unwrapObservable(valueAccessor() || {}); 
     $(element).chosen(options); 
    } 
}; 

Qui a SelectList runtime riempirò con tutte le opzioni disponibili dalla arrayOfOptions array e chosen è vincolante una consuetudine in cui Mi candido un CHOSEN PLUGIN su la select-list.

Ora il problema che sto affrontando qui è che nel collegamento personalizzato quando ho applicato il plug-in Scegli selezionate nell'elenco in quel momento l'elenco di selezione non è pieno con le opzioni dall'array . Significa in un termine semplice che custom binding è in esecuzione prima di options binding. Qualcuno può darmi una soluzione per questo in modo che l'associazione personalizzata venga applicata dopo l'associazione delle opzioni?

Answer 1

Spostare la chiamata su chosen nell'aggiornamento.

http://jsfiddle.net/jearles/avSfa/28/

-

ko.bindingHandlers.chosen = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     var allBindings = allBindingsAccessor(); 

     var options = {default: 'Select one...'}; 
     $.extend(options, allBindings.chosen) 

     $(element).attr('data-placeholder', options.default);     
    }, 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     $(element).chosen(); 
    } 
}; 

-

In alternativa, è possibile utilizzare setTimeout per spostare la chiamata alla chosen alla parte inferiore della coda di esecuzione. Ciò consentirà alle opzioni Knockout di impegnare il tempo per eseguire il proprio lavoro prima che lo chosen provi a trasformarlo.

ko.bindingHandlers.chosen = { 
    init: function (element, valueAccessor, allBindingAccessor, 
        viewModel, bindingContext) { 
     var options = ko.utils.unwrapObservable(valueAccessor() || {}); 
     setTimeout(function() { $(element).chosen(options); }, 0); 
    } 
}; 

Answer 2

ko.bindingHandlers.chosen = { 
init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
    var options = allBindingsAccessor().options; 

    options.subscribe(function (newValue) { 
     $(element).chosen(); 
     $(element).trigger("chosen:updated"); 
    }); 

    var value = allBindingsAccessor().value; 
    value.subscribe(function (newValue) { 
     $(element).trigger("chosen:updated"); 
    }); 
}, 
update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
    if (element.options.length > 0) { 
     $(element).chosen(); 
     $(element).trigger("chosen:updated"); 
    } 
} 

};

questo ha funzionato per me con KO JS 3.0

Answer 3

Mentre le risposte sopra possono risolvere il problema che è stato presentato, sembrano cadere a corto di personalizzazione del calo scelto menù a tendina, come ad esempio la disattivazione di ricerca passando { 'disable_search ':vero}.

Suggerisco le seguenti modifiche per consentire il passaggio della personalizzazione scelta nell'associazione.

<select data-bind="options : arrayOfOptions, optionsText: 'Name', 
    optionsValue: 'Name', chosen: { 'disable_search': true }"> 
</select> 

ko.bindingHandlers.chosen = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var options = allBindingsAccessor().options; 
     var chosenOptions = allBindingsAccessor().chosen; 

     options.subscribe(function (newValue) { 
      $(element).chosen(chosenOptions); 
      $(element).trigger("chosen:updated"); 
     }); 

     var value = allBindingsAccessor().value; 
     value.subscribe(function (newValue) { 
      $(element).trigger("chosen:updated"); 
     }); 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     if (element.options.length > 0) { 
      var chosenOptions = allBindingsAccessor().chosen; 
      $(element).chosen(chosenOptions); 
      $(element).trigger("chosen:updated"); 
     } 
    } 
}; 

Answer 4

Creare una proprietà after con una matrice di nomi bindingHandler da cui dipende questa associazione.

ko.bindingHandlers.chosen = { init: function (element, valueAccessor, allBindingAccessor, viewModel, bindigContext) { var options = ko.utils.unwrapObservable(valueAccessor() || {}); $(element).chosen(options); }, after:['options'] };