私は Sprockets を使用して Eco テンプレートをコンパイルし、それらを 1 つの JS ファイルとして連結して提供しています。
たとえば、次の 2 つのテンプレートがあるとします。
template1.jst.eco:
<b>Awesome template 1</b>
template2.jst.eco:
<b>Awesome template 2</b>
そして、Sprocketsrequire
ディレクティブを使用して、それらをファイルに含めます。
# example.coffee
#= require 'templates/template1'
#= require 'templates/template2'
html = JST['templates/template1']()
moreHtml = JST['templates/template2']()
コンパイル/連結された出力は次のexample.js
とおりです(警告、生成されたコードの長い部分):
(function() {
this.JST || (this.JST = {});
this.JST["templates/template1"] = function(__obj) {
if (!__obj) __obj = {};
var __out = [], __capture = function(callback) {
var out = __out, result;
__out = [];
callback.call(this);
result = __out.join('');
__out = out;
return __safe(result);
}, __sanitize = function(value) {
if (value && value.ecoSafe) {
return value;
} else if (typeof value !== 'undefined' && value != null) {
return __escape(value);
} else {
return '';
}
}, __safe, __objSafe = __obj.safe, __escape = __obj.escape;
__safe = __obj.safe = function(value) {
if (value && value.ecoSafe) {
return value;
} else {
if (!(typeof value !== 'undefined' && value != null)) value = '';
var result = new String(value);
result.ecoSafe = true;
return result;
}
};
if (!__escape) {
__escape = __obj.escape = function(value) {
return ('' + value)
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
};
}
(function() {
(function() {
__out.push('<b>Awesome template 1</b>\n');
}).call(this);
}).call(__obj);
__obj.safe = __objSafe, __obj.escape = __escape;
return __out.join('');
};
}).call(this);
(function() {
this.JST || (this.JST = {});
this.JST["templates/template2"] = function(__obj) {
if (!__obj) __obj = {};
var __out = [], __capture = function(callback) {
var out = __out, result;
__out = [];
callback.call(this);
result = __out.join('');
__out = out;
return __safe(result);
}, __sanitize = function(value) {
if (value && value.ecoSafe) {
return value;
} else if (typeof value !== 'undefined' && value != null) {
return __escape(value);
} else {
return '';
}
}, __safe, __objSafe = __obj.safe, __escape = __obj.escape;
__safe = __obj.safe = function(value) {
if (value && value.ecoSafe) {
return value;
} else {
if (!(typeof value !== 'undefined' && value != null)) value = '';
var result = new String(value);
result.ecoSafe = true;
return result;
}
};
if (!__escape) {
__escape = __obj.escape = function(value) {
return ('' + value)
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
};
}
(function() {
(function() {
__out.push('\n<b>Awesome template 2</b>\n');
}).call(this);
}).call(__obj);
__obj.safe = __objSafe, __obj.escape = __escape;
return __out.join('');
};
}).call(this);
(function() {
var html, moreHtml;
html = JST['templates/template1']();
moreHtml = JST['templates/template2']();
}).call(this);
この JS は正常に動作しますが、問題は、含まれている各テンプレートに対して Eco が生成するすべての補助的なテンプレート レンダリング関数が重複していることです。少数のテンプレートを含むプロジェクトでは、これらの補助関数のコードが実際のテンプレートのコードを上回ることは想像に難くありません。
補助機能を複製する代わりに再利用するように Srpockets/Eco を構成する方法はありますか?