Knockout.jsチュートリアル

目的

knockout.jsのチュートリアルを利用し学習と学んだ知識の整理

導入

• knockout.jsを使用してModel-View-ViewModel (MVVM)パターンを使用してWeb UIを構築するための基礎を学ぶ。

• モデル-ビュー-ビューモデル（MVVM）パターンを使ったWeb UIの構築の基本を、knockout.jsを使って学習する。

ビューと宣言的バインディングを使ってUIの外観を定義

• ビューモデルとオブザーバブルを使ってそのデータと動作を定義する方法

• そしてKnockoutの依存性追跡機能を使ってすべてを自動的に同期させる方法を学ぶ（任意のデータの連鎖をカスケードする場合でも）。

ビューでのバインディングの使用

• 人物に関するデータを含むビューモデル
  
• 人物データを表示するビューがあります。

今は "todo "と表示されているだけなので、修正しましょう。

ビュー内の2つの要素を修正し、データバインド属性を追加して人物の名前を表示する。

View

<!-- This is a *view* - HTML markup that defines the appearance of your UI -->

<p>First name: <strong>todo</strong></p>
<p>Last name: <strong>todo</strong></p>

↓

View

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

ViewModel

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = "Bert";
    this.lastName = "Bertington";
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

data-bind属性は、KnockoutがビューモデルのプロパティをDOM要素に宣言的に関連付ける方法です。
先ほどはテキストバインディングを使って DOM 要素にテキストを割り当てる。

コードを実行する

Ctrl+Enterキーを押す。

First name: todo

Last name: todo

↓

First name: Bert

Last name: Bertington

参考にしたサイト(いつもありがとうございます。)