View

document

基本

Viewはテンプレートを表す。
テンプレートはtagName属性で設定された要素の子要素になる。
tagNameで設定された要素がViewのroot要素になる。
子Viewはregionsで設定する。
Viewの属性はroot要素の属性になる。
View.render()はBackbone.jsのそれとは異なる

regions属性

テンプレート内でChildViewを設置する要素のセレクターを登録しておく

   regions: {
        <region name>: '<selector>',
        ...
    }

• view.addRegion(region_name, selector);
  

ui属性 *

下記のように設定する。

ui: {
    '<ui name>': '<selector>',
    ...
}

• view.getUI(ui)
  指定したuiに対応する要素を取得する。

events属性とtriggers属性で使用する。

ui: {
    'foo': '#foo',
    ...
},

events: {
    'click @ui.foo': 'fooHandler'
},

triggers: {
    'click @ui.foo': 'click:foo'
},

triggers属性 *

イベントを受け取って対応するイベントを発生させる。

events属性 *

イベントを受け取って対応するイベントハンドラを実行させる。

modelEvents *

collectionEvents *

イベント

• viewに関係したイベントリスト *

• view.triggerMethod(trigger_name, value) viewに登録されているtriggerを発生させる。

ChildView

onRenderの際にview.showChildView(region, view)でリージョンに子Viewを設置する。

• view.showChildView(region, view)
  指定したregionにviewを設置する。

• view.getChildView(region)
  指定したregionに存在するviewを取得する。
  存在しない場合はnullを返す。

• region.empty()
  regionに存在する要素を削除する。

• region.show(view);

• view.getRegion(region_name);

childViewEvents属性

子Viewで発生したイベントにイベントハンドラを紐付ける。

  childViewEvents: {
    '<event name>': '<handler>'
  }

Behavior

document

各Behaviorは所属しているViewを共通化することができる。
this.viewはBehaviorが所属しているView
Viewのbehaviors属性で利用するBehaviorを指定する。

behaviors: [BehaviorClass1, BehaviorClass2]

defaults属性

defaults属性にはデフォルトのoptionsの値を設定する。

    defaults: {
       type: 'car',
       date: '2015-01-19'
    }

Marionette.jsメモ
handlebars.js
Backbone.js