*

【spine.js】Spineのドキュメント翻訳 Controllers

公開日: : spine.js

元記事はこちら

はじめに

controllerはSpineの三位一体の最後の1つでとてもシンプルです。controllerはアプリ内の様々なコンポーネントを結びつける接着剤です。一般に、contorllerはDOMイベントに応答し、テンプレートをレンダリングしてmodelとビューの同期を保ちます。

実装

controllerはmodelの様に、Spine.Moduleを継承しているのでそのプロパティを全て持っています。これはextend()とinculde()を使用してcontrollerにプロパティを追加できることを意味しており、Spineのコンテキスト管理の利点を得ることができます。controllerを作成するために、Spine.Controllerを継承します。

var Tasks = Spine.Controller.sub({
  init: function(){
    // Called on instantiation
  }
});

Spineの慣例では、controllerの名前にはmodelに関連付けられたキャメルケースの名前が与えるようにします。上記の場合modelは”Task”になります。ふつう、インスタンスプロパティのみcontrollerに与えるので、その他のクラスと同じようにインラインでそれらを与えられます。controllerのインスタンス化はnewキーワードで行います。

var tasks;
tasks = new Tasks;

全てのcontrollerは関連付けられたelementを持ち、それにはインスタンスプロパティelでアクセスできます。このelementはcontroller作成時に自動的にセットされます。作成されたelementのタイプはtagプロパティで確認でき、デフォルトでは”div”となります。

var Tasks = Spine.Controller.sub({
  tag: "li"
});

var taskItem = new TaskItem;

elプロパティはインスタンかする際に引数に渡してセットすることもできます。

var tasks;
tasks = new Tasks({
  el: $("#tasks")
});

実際、インスタンス化時に渡したプロパティは新しく作成されたインスタンのプロパティとしてセットされます。例えばcontrollerに関連するレコードを渡すこともできます。

var taskItem;
taskItem = new TaskItem({
  item: Task.first()
});

controllerのconstructo()関数の中では、一般にイベントリスナをmodelとviewに追加します。

イベント

Spineはeventsプロパティを使ってDOM要素にイベントを追加する仕組みを提供します。

var Tasks = Spine.Controller.sub({
  events: {"click .item": "click"},

  click: function(event){
    // Invoked when .item is clicked
  }
});

eventsは次の様なフォーマットのオブジェクトです{“eventType selector”, “functionName”}。全てのセレクタはcontrollerに関連付けられた要素elから参照されます。もしセレクタが与えられない場合は、イベントは直接elに追加され、言い換えるとこれはセレクタにマッチした子要素に委譲されます。

Spineはコールバックのコンテキストを、現在のcontollerであるようにします。コールバックはイベントオブジェクトを渡し、event.targetを使ってイベントの対象となったオリジナルの要素にアクセスできます。

var Tasks = Spine.Controller.sub({
  events: {"click .item": "click"},

  click: function(event){
    var item = jQuery(event.target);
  }
});

Spineはイベントに以上を使用しているので、elの内容が変わっても問題はありません。必要なときに適切なイベントが発生します。

Spine.ControllerはSpine.Eventsを拡張しており、DOMイベントと同様にカスタムイベントをバインドや発生できます。

var ToggleView = Spine.Controller.sub({
  init: function(){
    this.items = this.$(".items");
    this.items.click(this.proxy(function(){
      this.trigger("toggle");
    }));
    this.bind("toggle", this.toggle);
  },

  toggle: function(){
    // ...
  }
});

エレメント

controllerを初めてインスタンス化した時、様々なelementsを参照しているインスタンス変数を設定するのが一般的です。例えば、”Tasks”controllerにitems変数を設定します。

var Tasks = Spine.Controller.sub({
  init: function(){
    this.items = this.$(".items");
  }
});

これは一般的なシナリオなので、Spineはヘルパーを用意しています。それがelementsプロパティです。{“selector”: “variableName”}のようなフォーマットです。controllerがインスタンス化される時、elementsプロパティを通して適切なelementsをプロパティに設定します。eventsのように、全てのセレクタはcontrollerの現在の要素elから参照されます。

var Tasks = Spine.Controller.sub({
  elements: {".items", "items"},

  init: function(){
    this.items.each(function(){
      // ...
    });
  }
});

APIドキュメント

controllerについてより詳細な情報はAPIドキュメント

関連記事

no image

【spine.js】Spine.jsを使ってはまったポイント

Spine.jsでクラスの継承をさせようとしていくつかはまってしましました。 ※CoffeSc

記事を読む

no image

【spine.js】Spineのドキュメント翻訳 Models

元のドキュメントはこちら はじめに 状態が変化する中、クライアントサイドで実現したい

記事を読む

no image

【spine.js】Spineの使い方

Spine.jsを使ってみようということで基本となる使い方をメモ。 詳しい話はAPIがあるしチュー

記事を読む

no image

【spine.js】Spineのドキュメント翻訳 Routing

元のドキュメントはこちら ↓↓↓ Routing - Documentation - Spi

記事を読む

no image

【spine.js】Spine.jsの基本 ~クラスの操作~

このエントリでprivateなプロパティを宣言してクラスみたいなことをやっていたのだけれど、これだけ

記事を読む

no image

【spine.js】Spineのドキュメント翻訳 Views & Templating using jQuery.tmpl

javascriptのテンプレートエンジンは他にMustacheというのが有力そうです。強みは様々な

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

no image
知らないと損をする6つのライセンスまとめ

オープンソースやフリーウェア、フリー素材などが巷に溢れ、それらを利用す

no image
ガリレオ:ニュースブラウザをリリースしました。

概要 ガリレオはニュースを読んだり、検索する機能に特化したブラウザア

no image
【android】Activityとプロセスのライフサイクル

またもやライフサイクル周りでハマったのですが、Androidのライフサ

→もっと見る

PAGE TOP ↑