キー入力を監視するには

サジェストやオートコンプリート、あるいは文字数カウンタ機能を実装するためには、入力値が即座に反映されなければいけません。

<p>userName: <input data-bind="value: userName" /></p>
<p>Counter: <span data-bind="text: userNameCount"></span></p>
 
<script type="text/javascript">
var viewModel = {
      userName: ko.observable(""),        // Initially blank
      userNameCount: ko.computed({
        read: function(){
          return this.userName().length;
        },
        owner: this
      })
    };
ko.applyBindings(viewModel);
</script>

上記のサンプルでは、まだリアルタイムに値を取得することはできません。
なのでカウンターはずっと0のままです。
inputの値は data-bind="value: valueName" で指定出来ます。

即座に値を取得する方法

valueUpdate 要素が必要になります。

<p>userName: <input data-bind="value: userName, valueUpdate: 'afterkeydown'" /></p>

valueUpdateには以下の３つパターンがあります。

• keyup
• keypress
• afterkeydown

公式のおすすめはafterkeydownです。大抵の場合はこれで問題ないでしょう。

ko.computedについて

ko.computedを扱うと、readとwriteに処理を挟み込むことができます。
上記の例だとuserNameが変更された時に連動してuserNameCountから値を返すようになっています。
使いこなせばコードもシンプルになるので便利です。

var hogeVal = "HOGE!";
var hoge = ko.computed({
  read: function () {
    return hogeVal;
  },
  write: function (value) {
    hogeVal = value;
  },
  owner: this
});