じぶんメモ

プログラミングのメモ、日常のメモとか。

knockoutを使ったDOM操作

knockout.jsを使えば、DOM操作を簡略に記述することができ、
コードの行数が減りそう。jQueryでガシガシDOM操作するよりスマートに記述できる。

knockoutでは、jsの変数と、htmlのセレクターをko.observable()という関数を使って関連づけることで、
自動的にセレクターの値の変化を感知することができる。

テキストボックスの入力値をspanタグに表示する

    <span data-bind="text: name"></span>
    <input type="text" data-bind="value: name/>
$(function(){
  // 監視する項目を宣言する
  function ViewModel() {
    // テキストボックス、spanタグの初期値はtestをセット
    // 値を取得する場合はthis.name()とする。
    this.name = ko.observable("test");
  }

  // 上記項目を監視開始
  ko.applyBindings(new ViewModel());
});

ラジオボタンの片方がONの場合にテキストボックスを非活性にする例

    <!-- checked属性は、selectedRadioの値を監視するisCorpSelectedメソッドによって決定する -->
    <input type="text" data-bind="value: name, disable: isCorpSelected" />

    <input type="radio" name="rdo" id="corp" value="corp" data-bind="checked: selectedRadio" />
    <label for="corp">企業</label>
    <input type="radio" name="rdo" id="corpGroup" value="corpGroup" data-bind="checked: selectedRadio" />
    <label for="corpGroup">企業グループ</label>
$(function(){
  function ViewModel() {
    this.name = ko.observable("test");
    // ラジオボタンの監視(初期値は企業グループ)
    this.selectedRadio = ko.observable("corpGroup");
    // 企業がチェックされているかの確認
    // 監視している値に関連する処理は、ko.computed()を使用。
    // ko.computed()を使用しないと、ラジオボタン変更時に関数が呼び出されない。
    // 第二引数のthisは、function()内のthisの振る舞いを決定する。
    this.isCorpSelected = ko.computed(function() {
      return this.selectedRadio() == 'corp';
    }, this);
  }

  ko.applyBindings(new ViewModel());
});

そのほかフォーム部品の扱いについては以下のURLが参考になる。

kojs.sukobuto.com