javascript - 分发基于 underscore.js 的模板

Question

我需要捆绑客户端模板供其他人用作 Backbone 组件库的一部分。我不能使用 RequireJS 或任何其他 AMD 解决方案。

我的想法是将所有 HTML 模板合并到一个 ingle 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 只是提供了一种加载文本的好方法，但这对我没有太大帮助。

是否有更好的方法来完成我想要的，或者我的方法是否已经很好了？

Answer 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);