Question

我需要捆绑客户端模板供其他人使用，作为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只是提供了一种加载文本的好方法，但这对我没什么用。

有没有更好的方法来实现我想要的，或者我的方法是否得到了好处？

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);属性的对象。

{{1}}

分发基于underscore.js的模板

1 个答案: