javascript - How to use JST with underscore.js? - Stack Overflow

admin管理员组

文章数量:1334133

I'm having troubles using variables that would normally be no problem with understand.js, but seemingly when you bine JST with underscore.js it seems to struggle.

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 piled = _.template(this.template(), this.data); //I pass in the plied JST template
        this.$el.html(piled);
    }
});

JST File rendered

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
};

Error

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>

Background Information

As expected, header is not available at the time of the reader, which is happening via grunt file with each change to my JST templates. I feel I must be implement JST's the wrong way.

But, to me this seems like the correct way of doing everything.

Of course, I am trying to use variables with underscore inside of sex.ejs

All of this code can be seen here: NB: I can assure that this is safe for work and contains no images, even though as misleading as the url is its really not adult material, its an educational app.

I'm having troubles using variables that would normally be no problem with understand.js, but seemingly when you bine JST with underscore.js it seems to struggle.

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 piled = _.template(this.template(), this.data); //I pass in the plied JST template
        this.$el.html(piled);
    }
});

JST File rendered

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
};

Error

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>

Background Information

As expected, header is not available at the time of the reader, which is happening via grunt file with each change to my JST templates. I feel I must be implement JST's the wrong way.

But, to me this seems like the correct way of doing everything.

Of course, I am trying to use variables with underscore inside of sex.ejs

All of this code can be seen here: http://m.sexdiaries.co.uk/#wank NB: I can assure that this is safe for work and contains no images, even though as misleading as the url is its really not adult material, its an educational app.

• javascript
• templates
• underscore.js
• jst

Share Improve this question Follow edited Oct 17, 2013 at 1:26 mu is too short 435k7171 gold badges858858 silver badges818818 bronze badges asked Oct 16, 2013 at 22:39 Jamie HutberJamie Hutber 28.1k5454 gold badges194194 silver badges312312 bronze badges 2

• What language is JST? – Trevor Commented Oct 16, 2013 at 22:53
• 2 @Trevor: JavaScript Template. You pre-pile your client-side templates into JavaScript functions and toss 'em all in an object so that you don't have to parse/pile them in the browser. – mu is too short Commented Oct 17, 2013 at 1:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You have this to define the view's template:

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

And JST contains functions (which is, more or less, the whole point of using JST-style prepiled templates):

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

Then you do this:

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

Two things are wrong there:

1. You've already called _.template to pile the template.
2. this.template is the piled template function that expects to be fed this.data.

The fix is quite simple:

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

本文标签： javascriptHow to use JST with underscorejsStack Overflow