如何使用带有underscore.js的JST?

时间:2013-10-16 22:39:58

标签: javascript templates underscore.js jst

我在使用通常对理解没有问题的变量时遇到麻烦,但是看起来当你将JST与underscore.js结合起来时似乎很难。

var something= SD.defaultView.extend({
    el: 'page',
    template: JST['app/www/js/templates/sex.ejs'],
    data: {
        header: 'some information!!!',
        image: '/img/path.jpg'
    },
    render: function () {
        var compiled = _.template(this.template(), this.data); //I pass in the complied JST template
        this.$el.html(compiled);
    }
});

呈现JST文件

this["JST"]["app/www/js/templates/sex.ejs"] = function (obj) {
    obj || (obj = {});
    var __t, __p = '', __e = _.escape;
    with (obj) {
        __p += ((__t = ( header )) == null ? '' : __t) + '<sexform>Hello There</sexform>';
    }
    return __p
};

错误

ReferenceError: header is not defined - templates.js (line 21)

...obj = {});var __t, __p = '', __e = _.escape;with (obj) {__p +=((__t = ( header )...

sex.ejs

<%= header %><sexform>Hello There</sexform>

背景资料

正如预期的那样,header在读者时是不可用的,这是通过grunt文件发生的,每次更改我的JST模板。我觉得我必须以错误的方式实施JST。

但是,对我而言,这似乎是做所有事情的正确方法。

当然,我正在尝试在sex.ejs中使用带下划线的变量

所有这些代码都可以在这里看到:http://m.sexdiaries.co.uk/#wank NB: 我可以保证这对工作是安全的并且不包含任何图像,即使它像网址一样误导它真的不是成人材料,它也是一个教育应用程序。

1 个答案:

答案 0 :(得分:6)

您可以定义视图的模板:

template: JST['app/www/js/templates/sex.ejs'],

JST包含函数(或多或少是使用JST样式预编译模板的重点):

this["JST"]["app/www/js/templates/sex.ejs"] = function (obj) {

然后你这样做:

var compiled = _.template(this.template(), this.data);
// function call ----------------------^^

那里有两件事是错的:

  1. 您已经调用_.template来编译模板。
  2. this.template是编译的模板函数,期望被提供this.data
  3. 修复非常简单:

    var compiled = this.template(this.data);