テンプレート内のパラメータ・ヘルパー関数の利用
Last modified by simdy on 2013/04/11, 19:20
hifiveでは、ビューテンプレートエンジンとしてEJSを使用しています。
テンプレート内のパラメータ・ヘルパー関数の利用
ビューテンプレートには、パラメータを渡すことができます。
パラメータはオブジェクトの形で渡します。
var sampleController = {
__name: 'SampleController',
execute: function() {
//テンプレートに渡すパラメータオブジェクト
var param = {
param1: 'VALUE1',
param2: 'VALUE2'
};
this.view.append(target, templateId, param);
}
}
__name: 'SampleController',
execute: function() {
//テンプレートに渡すパラメータオブジェクト
var param = {
param1: 'VALUE1',
param2: 'VALUE2'
};
this.view.append(target, templateId, param);
}
}
テンプレート内では、渡されたパラメータは、そのオブジェクトのプロパティ名で参照できます。
<div>
[%= param1 %], [%= param2 %] <!-- VALUE1, VALUE2 と出力される -->
</div>
[%= param1 %], [%= param2 %] <!-- VALUE1, VALUE2 と出力される -->
</div>
また、パラメータには関数を渡すことも可能です。
var sampleController = {
__name: 'SampleController',
execute: function() {
function myFunc(str){
return str.toLowerCase();
}
//テンプレートに渡すパラメータオブジェクト
var param = {
param1: 'VALUE1',
param2: 'VALUE2',
myFunc: myFunc
};
this.view.append(target, templateId, param);
}
}
__name: 'SampleController',
execute: function() {
function myFunc(str){
return str.toLowerCase();
}
//テンプレートに渡すパラメータオブジェクト
var param = {
param1: 'VALUE1',
param2: 'VALUE2',
myFunc: myFunc
};
this.view.append(target, templateId, param);
}
}
テンプレート内では、パラメータとして渡された関数を実行することができます。
<div>
[%= param1 %], [%= myFunc(param2) %] <!-- VALUE1, value2 と出力される -->
</div>
[%= param1 %], [%= myFunc(param2) %] <!-- VALUE1, value2 と出力される -->
</div>
プロジェクトにおいて良く使う関数を予めオブジェクトにまとめておき、
テンプレート内で使用する方法を以下に示します。
(function(){
var viewHelperFunc = {
helper1: function() { /* ... */ },
helper2: function() { /* ... */ },
helper3: function() { /* ... */ }
};
//proj.util.viewHelpers に関数を公開
h5.u.obj.expose('proj.util', {
viewHelpers: viewHelperFunc
});
})();
var sampleController = {
__name: 'SampleController',
execute: function() {
function myFunc(str){
return str.toLowerCase();
}
//テンプレートに渡すパラメータオブジェクト
var param = {
param1: 'VALUE1',
param2: 'VALUE2',
helper: proj.util.viewHelpers
};
this.view.append(target, templateId, param);
}
}
<div>
[%= param1 %], [%= helpers.helper1(param2) %]
</div>
[%= param1 %], [%= helpers.helper1(param2) %]
</div>