Knockout.jsのMVVMとobservableの項を意訳

公開日: : 最終更新日:2014/06/03 プログラミング

Knockout.jsでのMVVM(Model-View-View Model)パターンとobservableについて。

ちなみに理解できているかは微妙です。自分の備忘録としての記事であって、情報の正確性を保証するものではないので、正確に把握されたい方は原文を読まれる事をお勧め致します。

気が向いたらレイアウトの整形とか読みやすさに手を加えようと思います。

原文はココ

Model:

アプリケーションのデータを格納するもの(オブジェクト)。代表的なところで言えば銀行のアカウントのようなデータで、どのUIにも依存しない。

View Model:

UI上のデータや操作のコアとなるもの。例えば、リストエディターを実装した場合、ビューモデルはアイテムが入っているリストと、アイテムを追加/削除できるメソッドを持っている。

View:

ビューモデルの状態を表示するもの。ビューモデルからの情報を表示し、ビューモデルへコマンドを送る(クリックなど)。ビューモデルの状態が変更されたら更新する。


ビューモデルってのは以下みたいなものです。


var myViewModel = {
    personName: 'Bob',
    personAge: 20
};


超シンプルなビューを上記のビューモデルを使って表示してみます。


The name is <span data-bind="text: personName"></span>


ただこのままだとHTMLはdata-bindという属性を理解できないので、Knockoutをアクティベートします。記述先はHTMLの</body>の一行上か、jQueryでいう$(function(){})。要はDOM-readyになったら呼び出されるように。


<script src="knockout.js">
    ko.applyBindings(myViewModel);
</script>


これで、表示されます。

The name is Bob


ko.applyBindingsについて。

  • 第一引数は、使いたいビューモデル(オブジェクト)。
  • 第二引数は、適用したいdata-bind属性を宣言した場所。例えば、
    
    ko.applyBindings(myViewModel, document.getElementById('someElementId'));
    
    

    は、someElementIDというDOMエレメントに限定した適用が出来る。
    これは複数のビューモデルを持ち、ページの異なる領域にそれぞれ結び付けたい時に役立つ。

例えば、ビューモデルをこんな感じに変更します。


var myViewModel = {
    personName: ko.observable('Bob'),
    personAge: ko.observable(123)
};

これだけで、ビューを変更する必要は全くありません。この変更を検知して勝手にビューは更新してくれます。


全てのブラウザがJavascriptのgetterとsetterをサポートしているわけではないので(ゲフンッIEゲフンッ)、互換性のため、ko.observableオブジェクトは実際には関数です。

  • observableの現在の値を読むには、パラメータをつけずただobservableを呼びます。
    例えば、myViewModel.personName()と呼べば‘Bob‘が、myViewModel.personAge()なら123が返ってきます。
  • obervableへ新しい値を書き込むには、observableを呼び、新しい値を記述します。
    例えば、myViewModel.personName(‘Mary‘)で名前が‘Mary‘に書き変わります。
  • 複数のobservableプロパティへ書き込むには、myViewModel.personName(‘Mary‘).personAge(50)で名前に‘Mary‘が、ageに50が代入されます。

重要はポイントは、obsrevablesはそれらを観察できるということです。つまり、他のコードは「変更の通知を受けたい」と言う事ができます。(ほぼ直訳)
なので、data-bind="text: personName"と書いた時、personNameが変更されたら、text自身に通知されます。

nameの値をmyViewModel.personName(‘Mary‘)を呼び、‘Mary‘に変更したら、textは自動的にそれに結びついたDOMエレメントの内容(ここでは表示文字)を更新します。
このようにしてビューモデル野変更は、自動的にビューへ伝播します。

observablesを明示的に予約(ちょっと上級編)

通常なら用意されているものを手動でセットアップする必要はありませんので、ビギナーな方々は飛ばして下さい。

もしobservablesの変更通知を自分自身で作ったサブスクリプションで受け取りたい場合、subscribe関数を呼びます。例えば、


myViewModel.personName.subscribe(function(newValue) {
    alert("The person's new name is " + newValue);
});

こんな具合に呼び出して下さい。サブスクリプションを削除することも可能です。変数として参照を保持し、dispose関数を呼びます。


var subscription = MyViewModel.personName.subscribe(function(newValue){/*なんかやる*/});
// なんやかんやあって
subscription.dispose(); // もう通知を受けたくない

用意されているもので十分にサブスクリプション管理はケアされているので、ほとんどの場合、使う必要はないです。

スポンサードリンク

関連記事

no image

Texture PackerのautoSD設定でplaceholderがどうとかエラーが出た

Texture Packer (pro) v3.2.1のautoSD設定で cocos2d-x

記事を読む

no image

F-Siteセミナーのお話(LISMO! for Android au編)

5/14に開催されたF-Siteセミナーに参加してきました。 全部は書ききれないので、Flas

記事を読む

no image

F-Siteセミナーのお話(ソニックジャム編)

F-Siteセミナーのお話、続きです。 ソニックジャムさんが制作事例を通して実装方法などをご説

記事を読む

no image

FLVPlaybackが勝手にフルスクリーンに

タイトルの通りですが、フルスクリーンでexe書き出ししたファイルを実行すると、FLVPlayback

記事を読む

no image

[AS3]FLVPlayback UIスキンをスクリプトから取得する

FLVPlayback UIスキンをスクリプト側で設定した後、FLVPlaybackの再生準備が整っ

記事を読む

no image

WordPressの日付表示を英語表記に

WordPress3.0にアップグレードしたら、日付表示が日本語に戻ってしまったので、修正。

記事を読む

no image

flaファイルなしでUI Componentを実装する

今までFlashDevelopでUI Componentをサクッと使いたい時に、わざわざflaファイ

記事を読む

スポンサードリンク

スポンサードリンク

inishie_dungeon
イニシエダンジョンを遊んで思ったこと

β版から遊んでいたイニシエダンジョンの正式版が7/20にスタートしたの

tokaigi2015
ニコニコ闘会議2015 オープニングムービー考察

ニコニコ闘会議2015 1日目参加してきました。 以前気になったゲー

93437d0c78612fcd25acdf5f21abf07e
ウォッチドッグスを遊んでみて思ったこと

PS4版ウォッチドッグスをやっとクリアしました。Wii U版は12月4

2527908-future
[E3 2014]気になったゲーム

E3で個人的に気になったゲームを挙げていきます。 大乱闘スマッシュブ

haruo_minami
「お客様は神様です」の真意

Kindle版の桜井政博のゲームを遊んで思うことに書いてあったことなの

→もっと見る

PAGE TOP ↑