2012-03-21 6 views
0

私は私はこのような結合のテンプレートを使用しています、これでいくつかの問題を抱えている:knockoutjsとテンプレートでは、ユーザーがenterを押したときに入力の値を取得するにはどうすればよいですか?

<input type='text' data-bind='event: { keyup: function(data, event) { alert(); } }> 
</input> 

はしかし、私は)(入力の値を警告します。

私はそれが$(this).val()だと思いますが、thisは実際にはViewModelです。私はそれがdataと関係があると思っていましたが、dataはオブジェクト以外のものはわかりません。

アイデア?入力を取得してハンドラで読み書きできるようにしたい。

答えて

0

あなたがしようとしていることを正確に知らなければ、最良のアドバイスをするのは難しいですが、ここでは入力されたデータをキャプチャし、オブザーバーを使ってアラートを実行します。

http://jsfiddle.net/6hfpB

- 編集 - 私はそれがに2件のイベントハンドラ(キー入力やぼかし)を付加カスタムバインディングへの直接の観察者から変更するには、私のバイオリンを更新しましたあなたの要件に基づいて

ビューモデルにある関数を検証します。

http://jsfiddle.net/6hfpB/8/

+0

私は入力を取得し、event.keyCodeが入り、値が一定量であれば、からkeyupイベントでそれにいくつかのCSSを適用したいです。私はまた、値を調べ、10進数を入力した場合はそれを切り捨てたい。 – NibblyPig

1

たぶんextendersあなたの仕事のためのより良いソリューションですか?

あなたが必要とするものの例があります。

ko.extenders.numeric = function(target, precision) { 
    //create a writeable computed observable to intercept writes to our observable 
    var result = ko.computed({ 
     read: target, //always return the original observables value 
     write: function(newValue) { 
      var current = target(), 
       roundingMultiplier = Math.pow(10, precision), 
       newValueAsNum = isNaN(newValue) ? 0 : parseFloat(newValue), 
       valueToWrite = Math.round(newValueAsNum * roundingMultiplier)/roundingMultiplier; 

      //only write if it changed 
      if (valueToWrite !== current) { 
       target(valueToWrite); 
      } else { 
       //if the rounded value is the same, but a different value was written, force a notification for the current field 
       if (newValue != current) { 
        target.notifySubscribers(valueToWrite); 
       } 
      } 
     } 
    }); 

    //initialize with current value to make sure it is rounded appropriately 
    result(target()); 

    //return the new computed observable 
    return result; 
}; 

function AppViewModel(one, two) { 
    this.myNumberOne = ko.observable(one).extend({ numeric: 0 }); 
    this.myNumberTwo = ko.observable(two).extend({ numeric: 2 }); 
} 

ko.applyBindings(new AppViewModel(221.2234, 123.4525)); 
関連する問題