LoginSignup
8

More than 5 years have passed since last update.

knockout.js ObservableもViewModelも使わないHello World

Last updated at Posted at 2015-03-27

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がでてくるのでなくては動かないものと
誤解されているのかなぁーと思ったので書いてみました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8