Knockout.js Select2バインディング。 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バインディングです。モーダルダイアログで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（）のようです： self.departmentGroup = ko.observableArray(JSON.parse('[{"Value": 0, "Text": "Retail"},{"Value": 1, "Text": "Demonstrator"}]'))

希望すると助かります！