清除ko observable时清除select2 div

Question

I am having the following ko select2 binding:

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

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

Following is my input with select2 binding:

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

Everything is working perfectly fine. The problem I am facing is when I am clearing the Name observable through a Clear button, the values selected by the select2 div are not getting cleared. What change I have to do in the select2 ko binding to reflect the changes in the UI when the observable is cleared?

Answer 1

When Name is cleared, knockout clears also the value attribute of the input element.

select2 plugin does not track this and does not update its inner value. One solution is, in the custom binding handler, to subscribe to the value binding and clear select2 when the value is empty:

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