select2 durandel/koウィジェットからフォーカスを削除

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へのアクセスは、ビューモデル、bu t のみのバインディングハンドラ。

ビューモデルの作成時に、ノックアウトはDOMからターゲット要素を簡単に削除できました。 1つのifバインディングとウィジェットが壊れます。バインディングハンドラのinitメソッドは、要素がデータバインドされているときはいつでも実行されます。

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ための結合ハンドラは次のようになります（ただし、私は他の誰かが今まで1を作成した場合は、Googleへのアドバイスと思います）何