1

我正在尝试使用 grunt-contrib-jst 来编译我的下划线模板，但它似乎没有正确呈现/保留变量。以下是模板通常的样子：

<script id="header-template" type="text/template">
    <h4><%= subhead %></h4>
    <h1><span class="head-text"><%= head %></span>
      <span class="subtext"><%= subtext %></span>
    </h1>
    <p></p>
  </script>

下面是通过 grunt 渲染的内容：

this["JST"] = this["JST"] || {};

this["JST"]["templates/header.html"] = function(obj) {
obj || (obj = {});
var __t, __p = '', __e = _.escape;
with (obj) {
__p += '<h4>' +
((__t = ( subhead )) == null ? '' : __t) +
'</h4>\n<h1><span class="head-text">' +
((__t = ( head )) == null ? '' : __t) +
'</span>\n  <span class="subtext">' +
((__t = ( subtext )) == null ? '' : __t) +
'</span>\n</h1>\n<p></p>';

}
return __p
};

以下是我设置 grunt 任务的方式：

jst: {
      compile: {
        files: {
          "scripts/templates/all.js": ["templates/*.html"]
        }
      }
    }

当我尝试使用模板时：

var app = app || {};

app.HeaderView = Backbone.View.extend({
    el: '#header-container',
    //template: _.template( $( '#header-template' ).html() ),
    template: JST['templates/header.html'](), //http://stackoverflow.com/questions/8366733/external-template-in-underscore

    initialize: function( templateContent ) {
        this.render(templateContent);
    },
    render: function(templateContent) {
        this.$el.html(this.template(templateContent));
        return this;
    }
});

我收到此错误：

Uncaught ReferenceError: subhead is not defined

知道出了什么问题以及如何维护原始模板的格式吗？

4

1 回答 1

1

你说你是

[...] 尝试使用 grunt-contrib-jst 来编译我的下划线模板

这正是正在发生的事情。如果您查看_.template文档，您会看到：

source属性在已编译的模板函数上可用，以便于预编译。

如果你这样做<script>：

var t = _.template($('#header-template').html());
console.log(t.source);

你会在控制台中看到那个丑陋的功能。

演示：http: //jsfiddle.net/ambiguous/WjNGC/

因此，您的 JST 任务只是使用编译模板_.template，然后将编译后的模板函数的source属性转储到文件中；然后，当浏览器加载该 JavaScript 文件时，您会返回已编译的模板。

结果是你可以这样说：

var html = JST['templates/header.html'](data);

html无需在浏览器中编译模板即可获取填写好的模板。

于 2013-11-01T22:14:28.730 回答