Knockout.jsが超便利というお話です。

JavaScript


Knockout.jsはMVVMパターンのJavaScriptライブラリの一つのオープンソースです。
初版が2010年7月5日とのことなので結構前からあるのですが僕は2年前ぐらいから使い始めました。

何が便利っていちいちオブジェクト作るのにタグ書いたりしなくてよいのです。


実装例

Knockoutを使わない場合

■JS
$('<div>').addClass('class').append('<input type="hidden" name="test1" value="1" />');

動的に要素を追加する場合はタグを用意して追加したりする必要があり、可読性が著しく下がります。


Knockoutを使う場合

■JS
var ViewModel = function() {
  var self = this;
  self.test = ko.observable("");
}

var hoge = new ViewModel();
hoge.test(1);

Knockoutの場合はViewModelを宣言して設定するだけです。

■HTML
<div class="class">
  <input data-bind="value: test" name="test1" type="hidden" />
</div>

このようにあらかじめHTMLの構造のまま記述しておけば後はバインディングするだけで値がセットされます。


まとめ

JavaScriptを使用する場合はKnockout必須としてもよいぐらい便利で可読性もあがります。

TypeScriptを使えばクラスのように定義できるのでJavaユーザーには使いやすいかも。

今回ご紹介したのはデータをセットするだけですが、イベントの設定も簡単にできたりKnockoutは奥が深いライブラリです。
初めて使うときは戸惑うかもしれませんが慣れると超便利、KnockoutなしでJavaScriptは使えなくなります(個人的な意見です)。

ぜひ最高のKnockoutライフを!




スポンサーリンク