分发基于underscore.js的模板

Question

分发基于underscore.js的模板

javascriptbackbone.jsunderscore.jsbackbone-views

3

我需要将客户端模板打包成一个Backbone组件库供其他人使用。我不能使用RequireJS或任何其他AMD解决方案。

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

有更好的方法来实现我想要的吗，或者我的方法是最好的吗？

- Alex Dow

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- hamstu · Accepted Answer

你是否熟悉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);