javascript - Applying jquery plugin (selectric) to ko-bound dropdown -

javascript - Applying jquery plugin (selectric) to ko-bound dropdown -

i'm building simple query interface table of data.

i have 2 dropdowns - 1 select field table, , 1 select query perform on field. query dropdown items depend on info type, have wait until field selected populate it.

all bindings work if utilize plain old select elements. want apply selectric plugin them. problem is, after calling $(element).selectric() on elements, don't know how "refresh" items - first dropdown contains bound elements because it's populated. sec 1 never seems updated 'query' elements.

i've tried using custom ko binding, , calling .selectric() on update so:

ko.bindinghandlers.selectric = { init: function(element, valueaccessor) { $(element).selectric(); }, update: function(element, valueaccessor) { $(element).selectric(); } };

here's bindings 2 drop downs:

<select data-bind="options: $parent.fields, optionscaption: 'select field...', value: field_name, event: { change: fieldselected }, selectric: {}"></select> <select data-bind="options: queries, optionscaption: 'select query...', selectric: queries"></select>

here's fiddle w/ viewmodel, etc. http://jsfiddle.net/runjy/12/. if disable selectric binding, work... how can plugin re-create dropdown updated items?

there many ways this. here two:

1) hear observable specified in binding. same way.

usage:

<select data-bind="options: queries, optionscaption: 'select query...', selectric: queries"></select>

code:

ko.bindinghandlers.selectric = { update: function(element, valueaccessor) { ko.unwrap(valueaccessor()); //must utilize value in order update called $(element).selectric('refresh'); //must specify plugin should refresh. see selectric documentation } };

sample: http://jsfiddle.net/p4x4j/

2) utilize observable specified in options binding. i prefer solution since don't need specify same observable in 2 bindings.

usage:

<select data-bind="options: queries, optionscaption: 'select query...', selectric: {}"></select>

code:

ko.bindinghandlers.selectric = { init: function (element, valueaccessor, allbindingsaccessor) { $(element).selectric(''); if(allbindingsaccessor().options.subscribe) { var optionssubscription = allbindingsaccessor().options.subscribe(function (newvalue) { $(element).selectric('refresh'); }); ko.utils.domnodedisposal.adddisposecallback(element, function() { optionssubscription.dispose(); }); } } };

sample: http://jsfiddle.net/lbrgz/1/

javascript jquery html knockout.js drop-down-menu