Knockout.js Select2 绑定。将 Select2 升级到 v4 后损坏

Posted 2023-05-07

【中文标题】Knockout.js Select2 绑定。将 Select2 升级到 v4 后损坏

【英文标题】：Knockout.js Select2 binding. Broke after upgrading Select2 to v4

【发布时间】：2017-07-30 16:18:51

【问题描述】：

最近的 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 升级之前的代码非常相似。

【问题讨论】：

你之前的版本是什么？

@JasonSpake：Select2 是 3.4.3 版。

【参考方案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"]'))

希望对您有所帮助！