Ясно Выбор2 ДИВ, когда ко наблюдаемому очищаются

Question

Я имею следующий нокаут select2 связывания:

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

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

Ниже мой input с обязательным Выбор2:

<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, не очищаются. Какое изменение я должен сделать в привязке select2 ko, чтобы отразить изменения в пользовательском интерфейсе, когда наблюдаемый очищен?

Answer 1

Когда Name очищается, нокаут очищает также атрибут 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'); 
     }); 
    } 
};