How to use JST with underscore.js?

Question

I'm having troubles using variables that would normally be no problem with understand.js, but seemingly when you combine 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 compiled = _.template(this.template(), this.data); //I pass in the complied JST template
        this.$el.html(compiled);
    }
});

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.

@Trevor: JavaScript Template. You pre-compile your client-side templates into JavaScript functions and toss 'em all in an object so that you don't have to parse/compile them in the browser. — mu is too short, Oct 17 '13 at 01:28

score 6 · Accepted Answer · answered Oct 17 '13 at 01:26

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 precompiled templates):

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

Then you do this:

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

Two things are wrong there:

You've already called _.template to compile the template.
this.template is the compiled template function that expects to be fed this.data.

The fix is quite simple:

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

answered Oct 17 '13 at 01:26

mu is too short

426,620
70
833
800

wow, fantastic point. I have template in the namespace twice :) Well, the `_.template` was actually referring to this http://underscorejs.org/#template hence where the confusion came from. Changing the code as suggested still results in me getting the error `header is not defined` from the `sex.ejs`. Changing the code as suggested will still result in an error. So I have renamed the template inside `something` and ran with this `var compiled = _.template(this.jstemplate(), this.data); $ this.$el.html(compiled);` _.template expects `(string, data)`. `this.jstemplate()` returning a string – Jamie Hutber Oct 17 '13 at 07:43
`this.data` returning an object. Thanks as always for helping out a JST noob :) – Jamie Hutber Oct 17 '13 at 07:44
The thought occured to me that it may not be possible to use variables within JST. For the simple fact that, on compile there is no way for it know which variables I will be feeding it. – Jamie Hutber Oct 17 '13 at 08:57
Took me a while to get there :p Like you say I've already called `underscore` to compile the template. The key, seems to have been added `data` to the grunt `jst->options->templateSettings->variable->data` and then referring to the property as `data.header` Maybe I completely missed this, but I do think the document ion in the readme could be a little clearer for people complimenting :) – Jamie Hutber Oct 17 '13 at 11:59

How to use JST with underscore.js?

1 Answers1