Question

专注于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;
});

Answer 1

如果没有重现问题的例子很难说，但是你应该遵循一般规则：

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

在创建视图模型时，淘汰赛很容易从DOM中删除目标元素。一个if绑定和您的小部件中断。绑定处理程序＆＃39;只要元素受数据绑定，就会执行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);
  }
}

从select2 durandel / ko小部件中删除焦点

1 个答案: