Question

我有以下ko select2绑定：

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

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).select2('destroy');
        });
    }
};

以下是我的input与select2绑定：

<input type="text" class="form-control" data-bind="value: $root.Name, attr: { 'placeholder': 'Full Name' }, select2: { minimumInputLength: 1, query: $root.list_item, allowClear: true, multiple: true}">

一切都很好。我面临的问题是当我通过Name按钮清除Clear可观察量时，select2 div选择的值不会被清除。在select2 ko绑定中我需要做些什么更改才能在清除observable时反映UI中的更改？

Answer 1

清除Name后，knockout也会清除输入元素的value属性。

select2插件不会跟踪此内容并且不会更新其内部值。一种解决方案是，在自定义绑定处理程序中，订阅值绑定并在值为空时清除select2：

ko.bindingHandlers.select2 = {
    init: function (element, valueAccessor, allBindings) {
        $(element).select2(valueAccessor());
        // if a value binding exists, subscribe to it 
        // to clear the select2 plugin when the value is empty
        var valueBindingAccessor = allBindings.get('value');
        if(valueBindingAccessor) {
            valueBindingAccessor.subscribe(function(val) {
                if(val == '') {
                    $(element).select2("val", "");
                }
            });
        }
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).select2('destroy');
        });
    }
};

清除ko observable时清除select2 div

1 个答案: