Backbone Layout Manager でハンドルバー テンプレートを動的にロードするために、RequireJS とテキスト プラグインを使用しています。ただし、ページの読み込み時に、指定されたテンプレートではなく、すべてのテンプレートがダウンロードされます。以下に示すケースでは、フッターをレンダリングしたいだけで、すべてのファイル ( header
、modal
) だけではなくフェッチされますfooter.tpl
。
templateLoader.js
define(function (require) {
var Handlebars = require('handlebars');
var getTemplateFile = function (templateName) {
var tmpl = null;
switch (templateName) {
case 'header':
tmpl = require('text!../html/templates/header.tpl');
break;
case 'footer':
tmpl = require('text!../html/templates/footer.tpl');
break;
case 'modal':
tmpl = require('text!../html/templates/modal.tpl');
break;
}
return tmpl;
};
var _compiled = function (tpl, context) {
var compiled = Handlebars.compile(tpl);
return context ? compiled(context) : compiled;
};
return {
getTemplate: function (templateName, model) {
return _compiled(getTemplateFile(templateName), model);
}
}
});
MyView.js-レイアウトマネージャー
App.Views.StoreFooter = Backbone.Layout.extend({
beforeRender: function () {
this.$el.html(Templates.getTemplate('footer'));
}
});
Chrome にダウンロードされたリソースを確認するとmodal.tpl
、header.tpl
上記のコードによれば存在しないはずの が表示されます。