将jQuery插件（Selectric）应用于ko绑定下拉列表

Question

I'm building a simple query interface for a table of data.

I have two dropdowns - one to select the field from the table, and one to select the query to perform on that field. The query dropdown items depend on the data type, so I have to wait until the field is selected to populate it.

All the bindings work if I use plain old select elements. But I want to apply the selectric plugin to them. Problem is, after calling $(element).selectric() on the elements, I don't know how to get it to "refresh" the items - so only the first dropdown contains the bound elements because it's initially populated. The second one never seems to get the updated 'query' elements.

I've tried using a custom ko binding, and calling .selectric() on the update like so:

ko.bindingHandlers.selectric = {
    init: function(element, valueAccessor)
    {
        $(element).selectric();
    },

    update: function(element, valueAccessor)
    {
        $(element).selectric();
    }
};

Here's my bindings for the two 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 the fiddle w/ viewmodel, etc. http://jsfiddle.net/rUNJY/12/ . If you disable the selectric binding, it will work... how can I get the plugin to re-create the dropdown with updated items?

Answer 1

There are many ways to do this. Here are two:

1) Listen to the observable specified in your binding. This same as your 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 use value in order for update to be called
        $(element).selectric('refresh'); //must specify that plugin should refresh. See selectric documentation
    }
};

Sample: http://jsfiddle.net/p4X4j/

2) Use the observable specified in the options binding. I prefer this solution since I don't need to specify the same observable in two 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/