knockout.jsを導入した案件のレビュー時にobservableが大量に定義されたコードをみました。
もしかして、単純に変数を表示できることをわかっていない人が結構いるのではないかと思いました。
一番簡単な例としてHello Worldから書いてみました。
最もシンプルなHello World
単純に変数を表示したい場合は、ObservableもviewModelも使いません。
<p data-bind="text:hoge"></p>
window.hoge = "hello world"
ko.applyBindings(); //knockoutを実行
これを実行するとHello worldが表示されます。
knockoutさえ実行していればdata-bindからJSの変数を参照できます。
実行例
ViewModelをつかったサンプル
次はviewModelを使ってみます。
viewModelを指定するとhtmlから参照するthisがwindowからviewModelにかわります。
window下のhogeはwindow.を付けくわえます。
<h1 data-bind="text:window.hoge"></h1>
<h1 data-bind="text:hoge"></h1>
window.hoge = "hello world";
var viewModel = function(){
this.hoge = "hello world view model";
};
ko.applyBindings(new viewModel()); //knockoutを実行
変更に追随して変わるサンプル
次に変更にあわせて表示がかわるサンプルです。
observableという関数を定義しておくとHTMLを書いたあとに
observableを実行すると結果にあわせてHTMLの書き換え処理が走ります。
<h1 data-bind="text:window.hoge"></h1>
<h1 data-bind="text:$root.hoge1"></h1>
<h1 data-bind="text:$root.hoge2"></h1>
window.hoge = "hello world";
var viewModel = function(){
this.hoge1 = "hello world view model";
this.hoge2 = ko.observable("hello world view model");
};
var vm = new viewModel();
ko.applyBindings(vm); //knockoutを実行
vm.hoge1 = "Goodbye!!";//HTMLが変化しない。
vm.hoge2("Goodbye!!");//HTMLが変化する。
observableで定義しないと書き換え処理は走らないので、
書き換えたいところはobservableで定義します。
observableは便利なのですがけっこう重たいので、
なんでもobservableで書くというのはひかえたほうがいいです。
量が増えるととても重くなります。
わかっている人に説明すると
だからなに?なのかもしれないですが。
tutorialでいきなりviewModelとobservableがでてくるのでなくては動かないものと
誤解されているのかなぁーと思ったので書いてみました。