從select2 durandel/ko小部件中移除焦點

Question

專注於select2下拉菜單/選擇框會導致移動設備出現問題。鍵盤出現並與選項重疊 - 這是一個常見且衆所周知的問題。我有一個解決方案... https://jsfiddle.net/yw61h28z/

我的應用程序使用Durandel和淘汰賽，並試圖應用此修復似乎不可能。我的jquery被忽略了，我認爲它與杜拉爾組成有關，但不完全確定。

視圖 -

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