knockout.jsの練習

backbone.jsの勉強をしようと思っていたのだけど、今作ろうとしている物に対しては大きすぎるという感じがしたので、knockout.jsも勉強することに。
knockout.jsはbackbone.jsよりも軽量っぽい。てかMVVMだからそもそもbackbone.jsと違うアプローチのライブラリなのだけど。
一応、チュートリアルを二つほどやって(訳もわからないまま)、ドキュメントを見ながらまた自分で書いたりしているところ。
以下はそのメモなど。コードはJavaScriptで、あとHTMLを書くのは面倒なのでjadeで書いています。

基本的なところ

index.jade
doctype 5
html
  head
    meta(charset="utf-8")
    title knockout.js
  body
    script(src="http://knockoutjs.com/downloads/knockout-2.3.0.js")
    script(src="../index.js")

こんな感じのjadeテンプレートを用意して、これを加筆・修正していきます。


さっそくindex.jadeに以下を追記。

   body
+    p(data-bind="text: language")
     script(src="http://knockoutjs.com/downloads/knockout-2.3.0.js")


index.jsに以下を追記。

index.js
var profile = {
  name: 'sasaplus1',
  language: 'javascript'
};

ko.applyBindings(profile);

これでブラウザを開くとjavascriptと表示されるんじゃないでしょうか。


ko.applyBindingsにはオプショナルな第二引数があるようで、バインドする対象のDOMを指定することが出来るようです。

index.jade
   body
-    p(data-bind="text: language")
+    p#p1(data-bind="text: language")
+    p#p2(data-bind="text: language")
     script(src="http://knockoutjs.com/downloads/knockout-2.3.0.js")
index.js
-var profile = {
+var profile1 = {
   name: 'sasaplus1',
   language: 'javascript'
 };
+ 
+var profile2 = {
+  name: 'sasa+1',
+  language: 'delphi'
+};
 
-ko.applyBindings(profile);
+ko.applyBindings(profile1, document.getElementById('p1'));
+ko.applyBindings(profile2, document.getElementById('p2'));

とすると、javascript, delphiと表示されます。


あとは面倒なので記事には書かない。