敲除“选项”绑定的自定义绑定

Question

I am using knockout options binding like this:

 <select id="mydata" data-bind="options: mydata,
             optionsText:  function(item) {return getText(item); },
                 optionsValue:'dataId',
                 optionsCaption:'Choose...'">

</select>

I want to apply jquery Chosen plugin to the dropdown and whenever `"mydata" changes, I'd like to apply chosen update. So I figure the best way to do it is through ko custom binding. I found an simple example online, essentially a wrapper for "options" binding,like this:

ko.bindingHandlers.chosen = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        ko.bindingHandlers.options.init(element);
        $(element).chosen(); //i added this
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
         ko.bindingHandlers.options.update(element, valueAccessor, allBindingsAccessor);
        $(element).trigger("chosen:updated");//i added this
    }

};

But where do I specify the optionsText, optionsValue, OptionvCaptions in this custom binding? Thanks.

Answer 1

optionsText, optionsValue, OptionvCaptions are all part of the allBindingsAccessor parameter. So, you can either specify them in your data-bind, like you normally would, and pass them along, which is what your posted code does, or you could type in the defaults in your update binding. I think what you really want to do is specify them in your templates and not put application specific logic in your bindings, but if you really want to...

ko.bindingHandlers.chosen = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        //options.init only takes one parameter
        ko.bindingHandlers.options.init(element);
        $(element).chosen(); //i added this
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
         //options.update takes 3 parameters
         //we want the chosen binding to have defaults, if they aren't specified alr
         allBindingsAccessor.optionsText = allBindingsAccessor.optionsText || function(item) {return window.MyApplication.GetText(item)};
         allBindingsAccessor.optionsValue = allBindingsAccessor.optionsValue || 'dataId';
         ko.bindingHandlers.options.update(element, valueAccessor, allBindingsAccessor);
        $(element).trigger("chosen:updated");//i added this
    }