Knockout.js †
- http://knockoutjs.com
- 他のクライアントサイドJSフレームワークとの比較
| 形式 | 学習コスト | 参考文献 | View-Model連携 | 構成の定式化 | UIコンポーネント |
| knockout.js | MVVM (Model・View・ViewModel?) | 低 | 事例少(ただし本家のみで事足りる) | 双方向バインディング | なし | jQuery と連携可能 |
| backbone.js | MVC2（Model・Collection・View・Router・History） | 中 | 事例豊富 | 手動 | 強力 | underscore.js/jQuery に依存 |
| angular.js | MVW（Model・View・Whatever） | 大 | 事例少(本家の解説難解過ぎ) | 双方向バインディング | あり | angular-ui、ng-animate |
- knockout.js + require.js で、アプリ構成の定式化をしてあげれば、knockout.js 最強でないか?
- 「最強」: knockout.js = AK-47。威力が[十分]高い、耐久性が[十分]高い、コストが安い、構造が単純で素人にも扱える、部品の校正誤差の許容値が大きい(多少品質の悪い部品を組み込んでも動作する)
- 基本的に画面コンポーネントは HTML5 の標準コンポーネント ⇒ 画面の自動テストをする際に嬉しい
- 手の込んだコンポーネントが要るならみんな大好き jQuery UI / jQuery plugin を組み合わせられる
- require.js
- 具体的にどうなるかは、サンプルアプリケーションを参照せよ
MVVMについて †
- MVVM
- M : Model
- アプリケーションが取り扱うデータ。View には左右されない。
- Web Storage に永続化されることがある。offline 操作のため、画面遷移時の状態保持のため
- サーバサイドの処理結果として返されたり、処理依頼となる
- V : View
- VM : View Model
- HTMLの入出力項目へのデータのバインディングを行う
- 画面操作のイベントハンドラも View Model に実装する
- (多くの場合イベントハンドラ内で) Model からデータを取得したり、Model にデータを書き戻す
- 初期化処理 : Application Initializer
- HTML 読み込み時に、Initializer を読んで、その中で Model を読み込んだり、View Model と View のバインドをする
- 当然 Client Side で閉じたアプリで、Server Side は REST などの API 提供に特化。サーバーサイドで HTML は作らない
サンプル・アプリケーション †
First name, Last name を変更して、フォーカスを移すと Full name が更新される
ディレクトリ構成 †
[~/KnockoutExam]$ tree
.
├── README.md
├── js
│ ├── knockoutEx1_init.js
│ ├── knockoutEx1_model.js
│ ├── knockoutEx1_vmodel.js
│ ├── knockoutEx2_init.js
│ ├── knockoutEx2_model.js
│ ├── knockoutEx2_vmodel.js
│ ├── knockoutEx3_init.js
│ ├── knockoutEx3_model.js
│ ├── knockoutEx3_vmodel.js
│ └── lib
│ ├── domReady.js
│ ├── jquery-grid-4.7.1
│ │ ├── i18n
│ │ │ ├── grid.locale-ar.js
│ │ │ ├── grid.locale-bg.js
│ │ │ ├ ...
│ │ │ └── grid.locale-vi.js
│ │ ├── jquery.jqGrid.min.js
│ │ └── ui.jqgrid.css
│ ├── jquery-ui-1.11.3
│ │ ├── external
│ │ │ └── jquery
│ │ │ └── jquery.js
│ │ ├── images
│ │ │ ├── ui-icons_444444_256x240.png
│ │ │ ├── ui-icons_555555_256x240.png
│ │ │ ├── ui-icons_777620_256x240.png
│ │ │ ├── ui-icons_777777_256x240.png
│ │ │ ├── ui-icons_cc0000_256x240.png
│ │ │ └── ui-icons_ffffff_256x240.png
│ │ ├── index.html
│ │ ├── jquery-ui.css
│ │ ├── jquery-ui.js
│ │ ├── jquery-ui.min.css
│ │ ├── jquery-ui.min.js
│ │ ├── jquery-ui.structure.css
│ │ ├── jquery-ui.structure.min.css
│ │ ├── jquery-ui.theme.css
│ │ └── jquery-ui.theme.min.css
│ ├── knockout-3.2.0.js
│ ├── knockout-es5.js
│ └── require.js
├── knockoutEx1_HelloKo.html
├── knockoutEx2_Ko+jQuery.html
└── knockoutEx3_Ko+jqGrid.html
View †
- View は 通常のHTML
- 表示コンポーネントは普通の HTML5
- 表示コンポーネントである <input> や <button> の data-bind 属性で View Model との対応を定義する
- require.js で、画面アプリケーションの初期化シーケンスを呼び出す
- require.js を使わずに、knockout.js のみで画面アプリケーションを作ることもできる
- ちゃんとコンポーネント化しておかないと、メンテナンス不要のスパゲッティになる
- かと言って Backbone.js のやり方を有象無象にやらせようとしても...(以下略)
- require.js + knockout.js は、効果と導入コストがちょうどいい
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello knockdown.js</title>
<!--
require.js (http://requirejs.org/) を使って MVC のコードを分離する。
この HTML は、View層。Controller を require.js で読み込む。
Model と knockout.js などの依存ライブラリは、Controller から読み込む。
※ require.js を使わずに knockout.js のみでアプリをつくる事もできる
-->
<script type="text/javascript" charset="UTF-8" src="js/lib/require.js" data-main="js/knockoutEx1_init.js"></script>
</head>
<body>
<p>First name: <input data-bind="value: firstName" title="個人名を入力してください" /></p>
<p>Last name : <input data-bind="value: lastName" title="姓を入力してください" /></p>
<p>Full name : <strong data-bind="text: fullName"></strong></p>
<button data-bind='click: registerClick, disable: isEnableRegister'>Search</button>
</body>
</html>
Init †
- Init では、reqiure.js の設定と、画面の初期化シーケンスを記述する
- ここでは、Model と ViewModel? をバインディングし
- ViewModel? と View をバインディングしている
/*
* アプリケーションのイニシャライザ.
* -----------------------------------------------------------------------------
* HTML から呼び出されるモジュールは
* require([mod1, mod2], function(if1, if2) {
* // 処理
* }
* と記述する。
*
* 第一引数は、依存するライブラリ名。
* 第二引数は、画面の初期化を行う処理で、その引数は依存するライブラリ
* のインタフェースオブジェクト。
*
* 依存するライブラリは、AMD に準拠している必要がある。
* AMD に関しては knockoutEx1_model を参照してね
*/
require.config({
// Javascript の Base Url
baseUrl: 'js/lib',
// ライブラリのパスの別名を定義する
paths: {
'app': '../',
'knockout': 'knockout-3.2.0'
},
// AMDに対応してないモジュールを読み込む
shim: {
}
});
require(['knockout', 'app/knockoutEx1_vmodel', 'app/knockoutEx1_model', 'domReady!'],
function(ko, vmdl, mdl) {
ko.applyBindings(new vmdl(new mdl()));
}
);
ViewModel? †
- ViewModel? では、View のお守りをする
- Model と View のバインディング
- View のイベント処理
/*
* アプリケーションの View Model.
*
* require から呼び出されるモジュールは
* define([mod1, mod2], function(if1, if2) {
* return function ifObj() {
* var _name = "";
* this.getName = function() { return _name; };
* this.setName = function(name) { _name = name; };
* };
* }
* と記述する。
*
* これは、AMD ((Asynchronous Module Definition) に準拠している
* モジュール定義。
* 第一引数は、依存するライブラリ名。
* 第二引数は、インタフェースオブジェクトを作成する処理で、引数は
* 依存ライブラリのインタフェースオブジェクト。
*/
define(['knockout'], function(ko) {
return function appViewModel(mdl) {
this.firstName = ko.observable(mdl.firstName);
this.lastName = ko.observable(mdl.lastName);
/**
* フルネーム.
*/
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName().toUpperCase();
}, this);
/**
* 登録ボタンクリック時の処理.
*/
this.registerClick = function() {
// View Model を Model に書き戻す
mdl.firstName = this.firstName();
mdl.lastName = this.lastName();
// 登録処理 (本当はサーバーアクセス)
alert(JSON.stringify(mdl));
};
/**
* 登録ボタンの有効化フラグ.
*/
this.isEnableRegister = ko.computed(function() {
return '' === this.firstName() || '' === this.lastName();
}, this);
};
});
Model †
- Model には、この画面が持つべき情報を View とは切り離して定義する
- 通常、そのままサーバ (REST-API) のインタフェースオブジェクトになったり、WebStorage?に格納されたりする
/*
* アプリケーションの Model.
*/
define(function() {
return function appModel() {
this.firstName = 'Bert';
this.lastName = 'Simpson';
};
});
HTML#Knockout
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
