javascript - 将 jquery 插件 (selectric) 应用到 ko 绑定(bind)下拉列表

Question

我正在为数据表构建一个简单的查询界面。

我有两个下拉菜单 - 一个用于从表中选择字段，另一个用于选择要对该字段执行的查询。查询下拉项取决于数据类型，因此我必须等到选择该字段才能填充它。

如果我使用普通的旧 select 元素，所有绑定(bind)都会起作用。但我想申请selectric插件给他们。问题是，在元素上调用 $(element).selectric() 后，我不知道如何让它“刷新”项目 - 因此只有第一个下拉列表包含绑定(bind)元素，因为它最初是填充的。第二个似乎从未获得更新的“查询”元素。

我尝试使用自定义 ko 绑定(bind)，并在更新时调用 .selectric()，如下所示:

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

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

这是我对两个下拉菜单的绑定(bind):

 <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>

这是带有 View 模型等的 fiddle http://jsfiddle.net/rUNJY/12/ 。如果您禁用 selectric 绑定(bind)，它将起作用...我怎样才能让插件使用更新的项目重新创建下拉列表？

Answer 1

有很多方法可以做到这一点。这里有两个:

1) 监听绑定(bind)中指定的可观察对象。这和你的方式一样。

用法:

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

代码:

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

示例:http://jsfiddle.net/p4X4j/

2) 使用选项绑定(bind)中指定的可观察对象。 我更喜欢这个解决方案，因为我不需要在两个绑定(bind)中指定相同的可观察值。

用法:

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

代码:

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

示例:http://jsfiddle.net/LbRGz/1/