针对“选项”绑定的Knockout自定义绑定

时间:2014-01-13 19:17:17

标签: javascript jquery data-binding knockout.js

我正在使用像这样绑定的敲除选项:

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

</select>

我想将jquery Chosen plugin应用于下拉列表,每当“mydata”发生变化时,我想应用所选更新。所以我认为最好的方法是通过ko自定义绑定。我在网上找到了一个简单的例子,基本上是“选项”绑定的包装器,如下所示:

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
    }

};

但是我在哪里指定此自定义绑定中的optionsText, optionsValue, OptionvCaptions?感谢。

1 个答案:

答案 0 :(得分:0)

optionsText, optionsValue, OptionvCaptions都是allBindingsAccessor参数的一部分。因此,您可以像往常一样在数据绑定中指定它们,然后传递它们,这就是您发布的代码所做的,或者您可以在更新绑定中键入默认值。我认为你真正想做的是在你的模板中指定它们而不是在你的绑定中放置特定于应用程序的逻辑,但是如果你真的想要...

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
    }