grunt-contrib-jst を使用してアンダースコア テンプレートをコンパイルしようとしていますが、変数を適切にレンダリング/保持していないようです。通常のテンプレートは次のようになります。
<script id="header-template" type="text/template">
<h4><%= subhead %></h4>
<h1><span class="head-text"><%= head %></span>
<span class="subtext"><%= subtext %></span>
</h1>
<p></p>
</script>
grunt を介してレンダリングされるものは次のとおりです。
this["JST"] = this["JST"] || {};
this["JST"]["templates/header.html"] = function(obj) {
obj || (obj = {});
var __t, __p = '', __e = _.escape;
with (obj) {
__p += '<h4>' +
((__t = ( subhead )) == null ? '' : __t) +
'</h4>\n<h1><span class="head-text">' +
((__t = ( head )) == null ? '' : __t) +
'</span>\n <span class="subtext">' +
((__t = ( subtext )) == null ? '' : __t) +
'</span>\n</h1>\n<p></p>';
}
return __p
};
単調なタスクを設定する方法は次のとおりです。
jst: {
compile: {
files: {
"scripts/templates/all.js": ["templates/*.html"]
}
}
}
そして、テンプレートを利用しようとすると:
var app = app || {};
app.HeaderView = Backbone.View.extend({
el: '#header-container',
//template: _.template( $( '#header-template' ).html() ),
template: JST['templates/header.html'](), //http://stackoverflow.com/questions/8366733/external-template-in-underscore
initialize: function( templateContent ) {
this.render(templateContent);
},
render: function(templateContent) {
this.$el.html(this.template(templateContent));
return this;
}
});
次のエラーが表示されます。
Uncaught ReferenceError: subhead is not defined
何が問題なのか、元のテンプレートのフォーマットを維持する方法はありますか?