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

元記事はこちら

はじめに

controllerはSpineの三位一体の最後の１つでとてもシンプルです。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ドキュメント