コントローラのメタ属性の設定可能項目
概要
コントローラ(親コントローラ)は、コントローラ(子コントローラ)を持つことができます。
子コントローラには__metaプロパティによるメタ定義が可能です。
__metaプロパティは以下のようにして定義します。
__metaで設定できるプロパティ
__name: 'ParentController',
childController: childController,
__meta: {
childController: {
rootElement: '#child',
useHandlers: true
}
}
};
- 7行目から10行目がChildControllerのメタ定義となっています。
メタ定義は
子コントローラのプロパティ名: {
プロパティ1： xxx, プロパティ2: xxx, ...
}
}
と設定します。
上記の場合、子コントローラはchildControllerという名前で親コントローラのプロパティとして宣言されているので、
__metaの中でも同じようにchildControllerという名前で定義を行います。
子コントローラのプロパティ名を宣言する際は、サフィックスを必ずControllerにする必要があります。
rootElement
子コントローラは基本的に親コントローラと同じrootElementを持ちます。
しかし、機能を分割する手段としてコントローラを分ける場合やコンポーネントとしてコントローラを作成する場合、
親コントローラとは異なるrootElementを持ちたくなることがあります。
親とは異なるrootElementを持ちたい場合、以下のように__metaプロパティの中のrootElementというプロパティで設定を行います。
__name: 'ParentController',
childController: childController,
__meta: {
childController: {
rootElement: '#child'
}
}
};
rootElementには文字列とDOM要素が設定できます。
文字列
rootElementに文字列を設定した場合、hifiveは値をセレクタとみなし、
親コントローラをバインドした要素の中からセレクタにマッチする要素を選択します。
要素が見つからなかったり、複数ある場合はエラーとなります。
親コントローラをバインドした要素の中からではなく、グローバルに選択したい場合は、
イベントハンドラと同じように{}でセレクタを囲みます。
この場合も要素がない、もしくは複数ある場合はエラーとなります。
DOM要素
rootElementにDOM要素を設定した場合、設定した値がそのままrootElementとなります。
親、子、孫コントローラ
__metaでrootElementが設定されない場合、子コントローラのrootElementは自身の親コントローラのrootElementになります。
__name: 'ChildController',
grandChildController: grandChildController
};
var parentController = {
__name: 'ParentController',
childController: childController,
__meta: {
childController: {
rootElement: '#child'
}
}
};
上記のようなコントローラがある場合にParentControllerをA要素にバインドしたとします。
この時 rootElementは、
- ParentController: A要素
- ChildController: A要素内のidが"child"である要素
- GrandChildConttroller: A要素内のidが"child"である要素(1つ上の親であるChildControllerと同じ)
になります。
useHandlers
__metaのuseHandlersプロパティは子コントローラのイベントハンドラを使用するかどうかを定義します。
デフォルトはtrueです。
useHandlersプロパティがtrueの場合、子コントローラは自身のrootElementに対してイベントハンドラをバインドします。
__name: 'ChildController',
'input[type=button] click': function(context) {
this.log.info('button click');
}
};
var parentController = {
__name: 'ParentController',
childController: childController,
__meta: {
childController: {
useHandlers: true
}
}
};
ParentControllerをA要素にバインドしたとします。
useHandlersプロパティがtrueなのでChildControllerのイベントハンドラはバインドされます。
A要素内の"input[type=button]"というセレクタにマッチする要素が"click"されるとハンドラが動作し、
コンソールに"button click"というメッセージが表示されます。
useHandlersプロパティをfalseにすると、
A要素内の"input[type=button]"というセレクタにマッチする要素を"click"しても
イベントハンドラがバインドされていないため何も起きません。