3

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

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

有没有更好的方法来完成我想要的，或者我的方法是否尽可能好？

4

1 回答 1

1

你熟悉咕噜吗？在我的一个项目中，我使用JST 任务在构建时将我的各个模板编译到一个文件中。我将它们分别存储为单独的 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']which 提供，它实际上是一个你调用的函数（不是字符串），对象包含参数。对于我的标题模板，我必须传入一个带有title和subtitle属性的对象。

var template = app.templates['inc/header'];
var code = template({title: 'Hello', subtitle: 'World'});
this.$el.html(code);
于 2013-06-20T15:20:54.060 回答