Sassyブログ

埼玉県在住のシステムエンジニアです。多ジャンルなブログですが、基本的にはIT関連の内容を中心に他のちょいちょい他ジャンルの記事も発信していきます。

トップ > IT・ソフトウェア > knockout.js チュートリアル 【Introduction】

knockout.js チュートリアル 【Introduction】

IT・ソフトウェア

目次

本記事はknockout.jsの公式サイトにある以下のチュートリアルを実施した備忘録です。 learn.knockoutjs.com

Step1

まずはViewModelを定義して、htmlのstrongタグにデータバインド属性を追加して名前を表示するというサンプルプログラム

サンプルコード

画面に1対1で紐づくjsファイルを用意して、 そのjsファイル内にViewModelを定義する。（Model名は任意） ViewModel内には画面の項目に紐づくプロパティ名を定義し、とりあえず値には固定値を設定しておく。 そして、定義したViewModelのインスタンスをko.applyBindings()の引数に渡すことで画面へのバインディングを実現しているとわかった。

sample.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="../../lib/knockout-3.2.0.js"></script>
<script type="text/javascript" src="sample.js" defer="defer"></script>
<title></title>
</head>
<body>
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
</body>
</html>

sample.js

function AppViewModel() {
  this.firstName = "taro";
  this.lastName = "test";
}

ko.applyBindings(new AppViewModel());

Step2

今度はhtmlにinputタグを定義してテキストボックス内にViewModelの情報をバインドさせるサンプルプログラム

サンプルコード

画面の項目をテキストボックスに変えて入力を受け付けるように変更。 ko.observable()を定義することで画面から入力したデータをViewModel側で取得できることが分かった。

sample.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="../../lib/knockout-3.2.0.js"></script>
<script type="text/javascript" src="sample.js" defer="defer"></script>
<title></title>
</head>
<body>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
</body>
</html>

sample.js

function AppViewModel() {
  this.firstName = ko.observable("taro");
  this.lastName = ko.observable("test");
}

ko.applyBindings(new AppViewModel());

Step3

ko.computedを使用して入力したfirstNameとlastNameの値を動的に「Full name」の表示領域に表示してみるサンプルプログラム ko.computedは書き込みを可能にし、書き込まれた値に応じて処理するコールバック関数が呼ばれます。 以下の実装では入力してテキストボックスからフォーカスが外れた際に更新されます。

サンプルコード

フルネームを表示するプロパティを作成して、ko.computed()を設定する。 ko.computed()はko.observable()を監視しておりko.observable()が更新されるとko.computed()に渡したコールバック関数が呼ばれて再計算し計算結果を表示しているため、「First name」と「Last name」を書き換えると自動的に入力内容が反映されるということが分かった。

sample.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="../../lib/knockout-3.2.0.js"></script>
<script type="text/javascript" src="sample.js" defer="defer"></script>
<title></title>
</head>
<body>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>
</body>
</html>

sample.js

function AppViewModel() {
  this.firstName = ko.observable("");
  this.lastName = ko.observable("");
  this.fullName = ko.computed(
    function(){
      return this.firstName() + " " + this.lastName();
    }, this
  );
}

ko.applyBindings(new AppViewModel());

Step4

capitalizeLastNameプロパティを付与したボタンを作成して、「Full name」を大文字に変換するサンプルプログラム

サンプルコード

capitalizeLastNameプロパティに関数を設定している。 こうすることでクリックした際に、そのプロパティに設定している関数を呼び出すことができる。 そして、定義したプロパティからの値の取得と設定にはfirstNameであればfirstName()で取得でき、 firstName("[値]")で設定できる。 これはおそらく、暗黙的にそのプロパティに対するアクセッサメソッドが生成されるからであろう。

sample.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="../../lib/knockout-3.2.0.js"></script>
<script type="text/javascript" src="sample.js" defer="defer"></script>
<title></title>
</head>
<body>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>
<button data-bind="click: capitalizeLastName">Last nameを大文字にします</button>
</body>
</html>

sample.js

function AppViewModel() {
  this.firstName = ko.observable("");
  this.lastName = ko.observable("");
  this.fullName = ko.computed(
    function(){
      return this.firstName() + " " + this.lastName();
    }, this
  );

  this.capitalizeLastName = function(){
    var currentVal = this.lastName();
    this.lastName(currentVal.toUpperCase())
  }
}

ko.applyBindings(new AppViewModel());

記事トップは以下になります。

www.sassy-blog.com