Knockout.js Select2綁定。 將Select2升級到v4后中斷

Question

最近的一次Select2升級似乎打破了我的一些淘汰賽綁定，我現在無法完全選擇正確顯示選項。 破碎的選項選項旨在根據可觀察的數組books進行更新，並設置可觀察的book 。 我可以看到bindingHandler.update被調用，並且bindingHandler.update存在選項數據，但頁面上沒有任何更新。

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（），如： self.departmentGroup = ko.observableArray(JSON.parse('[{"Value": 0, "Text": "Retail"},{"Value": 1, "Text": "Demonstrator"}]'))

希望這對你有所幫助！