Geek Answers Handbook

How to order a knockout binding?

I am using knockout.js. I am stuck in a slightly strange situation (it's hard to explain, but I'm trying, sorry if I don't understand). I use binding binding and parameter bindings to a single select list:

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

Here, at run time, the selectlist will populate all available parameters from the arrayOfOptions array, and chosen is the custom binding in which I use the CHOSEN PLUGIN select-list.

Now the problem that I am facing is that in user binding, when I applied the selected plugin in the select list, at this time the select list is not populated with parameters from the arrayOfOptions array. The average value of custom binding runs before options binding . Can someone please give me a solution for this so that user binding is applied after options binding?

+6
source share
4 answers

Move the chosen call to the update.

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

-

Alternatively, you can use setTimeout to transfer the call to chosen to the bottom of the execution queue. This will give the Knockout options binding time to complete their work before the chosen tries to convert it.

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

Create an after property with the bindHandler array of names this binding depends on.

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

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

};

This worked for me with KO JS 3.0

+1
source

While the answers above may solve the problem that was presented, they do not seem to match the setting of the dropdown menu you selected, for example, disabling search by passing {'disable_search': true}.

I suggest the following changes to allow the transfer of the selected setting in your binding.

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

More articles:


All Articles