Удалить фокус из виджета select2 durandel/ko

Question

Фокус на выпадающем меню select2/select вызывает проблемы на мобильных устройствах. Клавиатура появляется и перекрывает параметры - общую и хорошо известную проблему. Один, у меня есть решение для ... https://jsfiddle.net/yw61h28z/

Мое приложение использует Durandel и нокаутом, и попытка применить это исправление кажется невозможным. Мой jquery игнорируется, я думаю, что он имеет какое-то отношение к дюрандальной композиции, но не совсем уверен.

View -

<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 не должен выполняться в моделях вида, bu t только в переплетных устройствах.

Во время создания модели вашего представления, нокаут легко удалил целевой элемент из DOM. Один if переплет и ваш виджет разрывается. Обработка обработчиков привязок init выполняется в любое время, когда элемент привязан к данным.

Вот что привязки обработчика для select2 может выглядеть следующим образом (но я бы посоветовал вам Google, если кто-нибудь когда-либо создал один):

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); 
    } 
}