Knockout

What is knockout?

✤ JavaScriptでMVVMを実現するフレームワーク

✤ というわけで今日はJavaScriptのおはなし

What is MVVM?

✤ MVVMはGUIのアーキテクチャパターンの一つ

✤ MVCとかMVPとか...

✤ Model - Veiw - ViewModel

MVVMではViewを直接操作しない

✤ えっ

✤ 画面表示はどうやって更新するの？

ViewModelを操作する

✤ ViewModelはViewの抽象表現

✤ バインディングを使用してViewとViewModelを同期する

だいたいこんな感じ

View ViewModelの描画
同期

ViewModel Viewの状態とロジック

Model その他

ボタンクリックで文字を表示

ViewModelを定義する

var viewModel = {};

viewModel.message = ko.observable('');

viewModel.clickAction = function(){
viewModel.message('hello world!');
};

ko.applyBindings(viewModel);

ViewModelにプロパティを追加

var viewModel = {};


};


最後にViewとバインド

var viewModel = {};


};


Viewのコード

<body>
<input type="button" value="click here!">
<div></div>
</body>

data-bind属性を追加する

イベントに対応する関数
<body>
<input type="button" data-bind="click: clickAction" value="click here!">
<div data-bind="text: message"></div>
</body>
テキストにmessageの
内容を表示

こんな感じにバインド

View ViewModel

};


1.イベントと紐付いた関数が呼ばれる

View ViewModel

};


2.ViewModelのプロパティを変更

View ViewModel

};


hello world!

3.自動でViewを更新

View ViewModel

};


hello world!

ちなみにjQueryだと...

セレクタ

$(‘input’).on(‘click’, function(){
$(‘div’).text(‘hello world!’);
});
セレクタ

大きくて複雑なHTMLの場合

✤ 複雑なjQueryのセレクタ

✤ セレクタを書くためだけのidとclass

✤ コード内にあふれるイベント登録、セレクタ、DOM操作

よくある感じのコード

セレクタ

var editorCache = $(‘#hoge div.editor’); イベント登録

editorCache.ﬁnd(‘[type=”button”]’).on(‘click’, function(){
セレクタeditorCache.ﬁnd(‘div.message’).text(‘hello world!’);
});
セレクタ DOM操作

本質的ではないコードで見通しが悪い

✤ 前のサンプルで実現したいこと

✤ ボタンがクリックされたらメッセージを表示する

あらためてknockoutを使ったコード

};

knockoutを使うメリット

✤ Viewの抽象表現であるViewを定義することで

✤ View(DOM)の構造の影響が少ない

✤ idとかclassとか親子関係とか

✤ data-bind属性だけ書いておけばおっけー

デメリット

✤ 他のjQueryプラグインとかとの組み合わせ

✤ data-bind属性書けないし...

✤ カスタムバインディングでなんとかできるけど面倒

Observables

✤ observable

✤ 値が変更されたらViewと同期

✤ observableArray

✤ オブジェクトが追加・削除されたら通知

✤ computed

observableをいつ使うか

✤ ViewとViewModelで状態を同期するプロパティ

✤ Viewが変更されたらViewModelを更新(一部のバインディング)

✤ ViewModelが変更されたらViewを更新

observableArray

✤ foreachとあわせて使う場合がほとんど

✤ 要素が増えたらテーブルの行を追加とか

テキストと外見に関するbindその1

✤ visible

✤ 要素の表示・非表示

✤ text

✤ 要素のテキスト

✤ html

✤ 要素のinnerHTML

テキストと外見に関するbindその2

✤ css

✤ クラス属性の追加・削除

✤ style

✤ 要素のスタイルを設定

✤ attr

✤ 属性を設定

foreachの使い方

observableArray
のプロパティ

<ul data-bind="foreach: members">
<li data-bind="text: $data"></li>
</ul>
繰り返す部分

foreachとアニメーション

✤ オブジェクトの追加後、削除前に呼び出す関数を設定できる

✤ afterAdd

✤ beforeRemove

✤ ここにアニメーションのコードを書く

✤ jQueryのfadeInとかhide(‘normal’)とか

Knockout

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Knockout

Similar to Knockout (20)

Knockout

Editor's Notes