【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ドキュメント
関連記事
-
-
【spine.js】Spineのドキュメント翻訳 Models
元のドキュメントはこちら はじめに 状態が変化する中、クライアントサイドで実現したい
-
-
【spine.js】Spine.jsの基本 ~クラスの操作~
このエントリでprivateなプロパティを宣言してクラスみたいなことをやっていたのだけれど、これだけ
-
-
【spine.js】Spineのドキュメント翻訳 Routing
元のドキュメントはこちら ↓↓↓ Routing - Documentation - Spi
-
-
【spine.js】Spineの使い方
Spine.jsを使ってみようということで基本となる使い方をメモ。 詳しい話はAPIがあるしチュー
-
-
【spine.js】Spineのドキュメント翻訳 Views & Templating using jQuery.tmpl
javascriptのテンプレートエンジンは他にMustacheというのが有力そうです。強みは様々な
-
-
【spine.js】Spine.jsを使ってはまったポイント
Spine.jsでクラスの継承をさせようとしていくつかはまってしましました。 ※CoffeSc