从 select2 durandel/ko 小部件中移除焦点答案

【问题标题】：Remove focus from select2 durandel/ko widget从 select2 durandel/ko 小部件中移除焦点
【发布时间】：2017-04-13 07:50:49
【问题描述】：

专注于 select2 下拉/选择框会导致移动设备出现问题。键盘出现并与选项重叠 - 这是一个常见且众所周知的问题。我有一个解决方案... https://jsfiddle.net/yw61h28z/

我的应用程序使用 Durandel 和淘汰赛，尝试应用此修复似乎是不可能的。我的 jquery 被忽略了，我认为这与 durandal 组合有关，但不完全确定。

查看 -

<div data-bind="attr: {'id': field.id + 'container'}">
    <span class="linkify" data-bind="text: field.title"></span>
    <span class="requiredAsterisk" data-bind="visible: field.mandatory">*</span>
    <div data-bind="attr: {'id': field.id}">

        <select id="dataCombo" class="form-control"
                data-bind="autocomplete: {items: field.options,
                                          idField: 'key', textField: 'value',
                                          onSelect: handleSelection,
                                          multiple: true}"
                style="width: 100%"></select>

    </div>
</div>

viewmodel.js -

define(['jquery','knockout'], function ($,ko) {
    function PickListMultiViewModel () {
        var self = this;

        self.activate = function(input) {
            self.field = input.data;
        };

        self.handleSelection = function (selectedOptions) {
            if(!selectedOptions) {
                return self.field.value();
            }
            self.field.value(_.map(selectedOptions, 'key'));
        };

       <!-- remove focus -->
        $("#dataCombo").select2({
            closeOnSelect: false
        });
        $("#dataCombo").on('select2:open', function (e, i) {
            $(document.activeElement).blur()
        });
       <!-- remove focus end -->
    }

    return PickListMultiViewModel;
});

【问题讨论】：

标签： jquery knockout.js durandal

【解决方案1】：

如果没有重现问题的示例，很难判断，但您应该遵循一个一般规则：

不应在视图模型中访问 DOM，而应仅在绑定处理程序中完成。

在创建视图模型时，knockout 可以轻松地从 DOM 中删除目标元素。一个if 绑定和您的小部件损坏。绑定处理程序的init 方法在元素绑定数据时执行。

这是您的select2 的绑定处理程序的样子（但如果其他人曾经创建过，我建议您使用谷歌搜索）：

ko.bindingHandlers.select2 = {
  init: function(element) {
    var $el = $(element);
    var dispose = function() {
      $el.select2("data", null);
    };

    $el.select2({
      closeOnSelect: false
    });

    $el.on('select2:open', function(e, i) {
      $(document.activeElement).blur()
    });

    ko.utils.domNodeDisposal
      .addDisposeCallback(element, dispose);
  }
}

【讨论】：