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が参考になる。