2016-04-06 12 views
0

HTMLコードに押されたキーを入力した後に観察更新する方法</p> <pre class="lang-html prettyprint-override"><code><input type="text" data-bind="value: nextName"> </code></pre> <p>観察可能なInternet Explorerの

nextName: KnockoutComputed<string>; 
currentName: KnockoutObservable<string>; 

constructor() 
{ 
    this.nextName = ko.pureComputed(
    { 
     read:() => this.currentName(), 
     write: (value: string) => 
     { 
      this.currentName(value); 
      if ((value) && value.trim().length > 0) 
       this.runSearch(); 
     } 
    }, this); 
} 

ユーザーは、Enterキーを押した後 - 検索は、たとえばChromeで正常に実行されますが、いないでインターネットエクスプローラ。
私はvalueUpdate:'afterkeydown'でバインディングを使用しようとしましたが、これはすべての文字の後に検索を実行します。これは達成しようとしたものではありません。

答えて

0

あなたはバインディングtextInputを使用して、あなたがやりたいenterkeyためcustom Knockout bindingを作成することができます。
textInputは、インスタンスautocompleteの更新、drag-and-drop、およびclipboardイベントを提供します.IT viewmodelプロパティと要素の値の間の双方向の更新を提供します。その後、ユーザがEnterキーを押すたびにenterkeyバインディングを使用して関数を呼び出すことができます。これはIEでも有効です。

<input type="text" data-bind="textInput: nextName,enterkey: function() {runSearch()}"> 

カスタムノックアウト結合:

ko.bindingHandlers.enterkey = { 
    init: function (element, valueAccessor, allBindings, viewModel) { 
     var callback = valueAccessor(); 
     $(element).keypress(function (event) { 
      var keyCode = (event.which ? event.which : event.keyCode); 
      if (keyCode === 13) { 
       callback.call(viewModel); 
       return false; 
      } 
      return true; 
     }); 
    } 
}; 

作業例:http://jsfiddle.net/GSvnh/5124/