備忘録

なんとなく暇なときにでも....

オブザーバ・パターンについて ~ Backbone.js難しい... ~

最近の投稿があんまり技術系の話から逸れ気味なので、方向を修正します。

最近はBackbone.jsというjsのフレームワークを触っています。
俗にいうMVCフレームワークなのですが、あんまりControllerの存在感がない感じでした。(ViewとModelの直接的な関係が大きい感じでしょうか。)
複数個のModelを管理しているCollectionがあったり、URLの監視を行うRouterやRouterの履歴を監視するHistoryがあったり。
jqueryすげー」ってなってた私からすれば、かなり難易度高い...。

イベント駆動のオブザーバ・パターンのフレームワークです。
イベント駆動とは、あらかじめ各Viewにトリガーと、発火メソッドを登録しておくこと。
そうすることでViewに対するイベントをトリガーにして、(MVCでいうところのController)View内のメソッドが発火します。
イベント駆動自体はJqueryでも同じような考え方をしてます。

また、基本的に複数のViewに対して1つのモデルが存在しているため、任意のView(仮にAとします。)でModelのある値を変更したとき、その他のViewにもModelの値の更新を通知しなくてはなりません。他のViewに更新がないと使ってるユーザーにはバグにしか見えないですよね?

例えば、Facebookのフィードで気になる記事があったとします。

↓フィード上の気になる記事
f:id:tomAn:20160903183821p:plain:w300


そこで、いったんこの記事をタップして、詳細ページに遷移しました。

↓詳細ページ
f:id:tomAn:20160903184245p:plain:w300


その詳細ページで”いいね”をした後、最初のフィードに戻ってきました。
さて。その時、フィードをリフレッシュさせなくても、”いいね”がフィード上でもされてる状態であるべきです。
View(詳細ページでの記事)でModel(気になった記事)の内容が”いいね”によって更新されたときに、他のView(フィード上の記事)でも、Modelの値の変更を読み取る必要があるということ。
これをオブザーバ・パターンといいます。

オブザーバ・パターン...
よくわかんないけど便利なのはわかります。

Backboneでは、listenTo()というメソッドを使って、これを実装することができます。
上の例でいうと、

var feed = Backbone.view.extend({
 collection:feed_conllection,


    initialize: function() {
   this.listenTo(this.collections, 'update', this.update);
    }


 update: function() {
  //feed_collectionの更新をハンドリングして、自身のViewに更新をかけるような処理を行う。
 } 
});

簡単に書くとこんな感じでしょうか。


まだ私も触りだしたばかりなので、わからないことが多すぎで大変です。
今月一杯で社内のbackbone.jsの仕様はある程度精通できるようにはしたいですね。



本日はここまで。


参考

qiita.com

qiita.com

blog.mitsuruog.info

akiyoko.hatenablog.jp




ついでにフォローしてください。 twitter.com