Knockout.js选择2绑定。将升级后的Select2升级到v4

Question

最近的Select2升级似乎破坏了我的一些淘汰赛绑定，而我现在还无法完全选择正确显示选项。破碎选择的选项旨在基于可观察数组books进行更新，并设置可观察到的book。我可以看到bindingHandler.update被调用，并且选项数据存在于valueAcessor中，但是页面上没有任何更新。

HTML

<select name="book_choice" id="book_selector" class="form-control input-sm" 
     data-bind=" 
      select2: { 
       value: book, 
       options: function(){return {results: books(), text:'id'}}, 
       optionsText: bookFormat, 
       optionsValue: bookFormat, 
       placeholder:'-- Select Book --' 
      } 
     " 
></select> 

JS

ko.bindingHandlers.select2 = { 

    init: function(el, valueAccessor, allBindingsAccessor) { 

     var allBindings = allBindingsAccessor(); 
     var select2 = ko.utils.unwrapObservable(allBindings.select2); 

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

     $(el).select2(select2); 

     // update select2 if value is set elsewhere 
     select2.value.subscribe(function(newValue){ 
      if (newValue){ 
       $(el).val(newValue.id); 
      } 
     }); 

     $(el).on("select2:select", function(event){ 
      var allBindings = allBindingsAccessor(); 
      if (event.choice){ 
       allBindings.select2.value(event.choice); 
      } 
     }); 
    }, 

    update: function(el, valueAccessor, allBindings, viewModel, bindingContext) { 
     var obj = valueAccessor(); 
     $(el).select2("data", obj.options()); 

     console.log(obj.options()); 

     if (_.contains(obj.options().results, obj.value())){ 
      $(el).val(obj.value().id); 
     }else{ 
      obj.value(null); 
     } 

     $(el).prop('disable', !obj.options().results.length > 0); 
     $(el).trigger('change'); 
    } 
}; 

我已经尝试了许多不同的修复，但是这是非常类似于V4升级之前的代码。

Answer 1

这是我的select2 binding.my情况在模态对话框中使用select2。

init: function (el, valueAccessor, allBindingsAccessor, viewModel) { 
     var bindingId = "#" + valueAccessor() + ""; 
     var value = allBindingsAccessor().value; 
     ko.utils.domNodeDisposal.addDisposeCallback(el, function() { 
      $(el).select2('destroy'); 
     }); 
     // $("#myModalCreate") 
     $(el).select2({ 
      dropdownParent: $(bindingId), 
      width: '100%' 
     }); 
     // update select2 if value is set elsewhere    
      value.subscribe(function (newValue) { 
       if (newValue != undefined) { 
        $(el).val(newValue).trigger('change'); 
       } 
      }); 


    }, 
    update: function (el, valueAccessor, allBindingsAccessor, viewModel) { 

     var value = valueAccessor(); 
     var valueUnwrapped = ko.utils.unwrapObservable(value); 
     $(el).val(valueUnwrapped).trigger('change'); 
    } 

用法：

<select data-bind="select2: 'myModalCreate',options: $root.departmentGroup, optionsText: 'Text', optionsValue: 'Value', value: DepartmentGroup" class="col-xs-12 "></select>

DepartmentGroup是可观察的。 $ root.departmentGroup是observableArray（）like： self.departmentGroup = ko.observableArray(JSON.parse('[{"Value": 0, "Text": "Retail"},{"Value": 1, "Text": "Demonstrator"}]'))

希望这对你有所帮助！