我需要捆绑客户端模板供其他人使用,作为Backbone组件库的一部分。我不能使用RequireJS或任何其他AMD解决方案。
我的想法是将所有HTML模板组合成一个isngle JS文件,该文件定义包含模板的变量。然后有人必须这样做:
<script type="text/javascript" src="/js/templates.js"></script>
templates.js看起来像
var ns = ns || {};
ns.templates = {};
ns.templates['my-special-list'] = "<% _.each(stuff, function(model) { %><li><% print(model.get('title')); %></li><% }); %>";
然后我的观点可以做如下事情:
var V = Backbone.View.extend({
initialize: function() {
if (_.isUndefined(this.template)) {
this.template = _.template(ns.templates['my-special-list']);
} else {
this.template = _.template(this.template);
}
}
render: function() {
this.$el.html(this.template.render(this.options));
}
}
这个想法似乎有效。仍然允许人们毫不费力地传递他们自己的模板,同时仍然允许我在构建时将所有模板组合成单个HTML文件。
尽管如此,我感觉并发症的结合所有这些。首先,每个新行都需要转换为\ n,转义字符等。
说实话,我想不出另一种方法。我试着用谷歌搜索,并没有看到太多帮助。 RequireJS只是提供了一种加载文本的好方法,但这对我没什么用。
有没有更好的方法来实现我想要的,或者我的方法是否得到了好处?
答案 0 :(得分:1)
您熟悉Grunt吗?在我的一个项目中,我使用JST task在构建时将我的个人模板编译成一个文件。我将它们作为单独的HTML文件存储,然后将其存储在Gruntfile.js中:
jst: {
compile: {
options: {
namespace: 'app.templates',
processName: function(filename) {
// simplify the template names
filename = filename.replace('app/templates/', '');
return filename.replace('.html', '');
}
},
files: {
"<%= yeoman.app %>/scripts/templates.js": ["<%= yeoman.app %>/templates/{,*/}*.html", "<%= yeoman.app %>/templates/**/{,*/}*.html"]
}
}
}
例如,我的标题模板( app / templates / inc / header.html )如下所示:
<h1 class='topbar-header'><%= title %></h1> <h2 class="subtitle"><%= subtitle %></h2>
这是由JST编译并通过app.templates['inc/header']
提供的,title
实际上是一个函数,您使用包含参数的对象调用(不是字符串)。对于我的标题模板,我必须传入一个包含subtitle
和var template = app.templates['inc/header'];
var code = template({title: 'Hello', subtitle: 'World'});
this.$el.html(code);
属性的对象。
{{1}}