Question

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

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

如果我使用普通的旧select元素，则所有绑定都有效。但是我想将selectric插件应用于它们。问题是，在对元素调用$（element）.selectric（）之后，我不知道如何将其转换为＆＃34;刷新＆＃34;项目 - 因此只有第一个下拉列表包含绑定元素，因为它最初是填充的。第二个似乎永远不会得到更新的查询＆＃39;元件。

我尝试使用自定义ko绑定，并在更新上调用.selectric（），如下所示：

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

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

这是我对两个下拉列表的约束：

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

这里是小提琴w / viewmodel等http://jsfiddle.net/rUNJY/12/。如果你禁用selectric绑定，它将工作...如何让插件重新创建更新项目的下拉列表？

Answer 1

有很多方法可以做到这一点。这是两个：

1）听取绑定中指定的observable。这跟你的方式一样。

用法：

 <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）使用options绑定中指定的observable。 我更喜欢这个解决方案，因为我不需要在两个绑定中指定相同的observable。

用法：

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

将jquery插件（selectric）应用于ko-bound下拉列表

1 个答案: