Issue with with 'use strict' and underscore.js

Question

I've written an app using Yeoman and backbone.js. At the top of every js file I have specified 'use strict'; and when I run my grunt tasks jshint does not encounter any errors.

I am able to build my app with grunt without issue however when I try to run the uglified js I get the following error:

Uncaught SyntaxError: Strict mode code may not include a with statement

I've searched the code base and the only things using a with statement is underscore.

I'm new to strict mode so I'm not sure how I can resolve this issue. Can I not use strict mode anywhere that I use an underscorejs function?

Thanks.

EDIT:

Given the code samples below (shortened for brevity). How could I change it to resolve this issue.

'use strict';

/*global, Backbone, JST*/

var MyView = Backbone.View.extend({

    template: JST['app/scripts/templates/MyView.ejs'],

    initialize: function()
    {
        this.render();
    },

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

    templateVariables: function()
    {
        return {var1 : 'Hello', var2 : 'World'};
    }
});

in MyView.ejs

<p><%= var1 %><%= var2 %>!</p> //<p>Hello World!</p>

EDIT 2:

Using @mu is too shorts's answer below I discovered that the best way to resolve the calls to _.template that were giving me grief was change my grunt-JST task as follows:

jst: {
        compile: {
            options:
            {
                templateSettings:
                {
                    variable: 'data'
                }
            },
            files: {
                '.tmp/scripts/templates.js': ['<%= yeoman.app %>/scripts/templates/*.ejs']
            }
        }
    },

And then change each of my templates to use the <%= data.templateVariable %> format.

May not apply to others, but I ran into this issue using Yeoman with Grunt and a Backbone generator so I can't be the only one.

Answer 1

Underscore's _.template uses with internally to allow things like <%= pancakes %> to be resolved to obj.pancakes. If you look inside _.template, you'll find this:

if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';

That's where the offensive with comes from. If you're using JST style precompiled templates, that source is what you'll end up with inside your JST object and that makes the withs visible within the scope of "use strict". Notice that settings.variable in there? The documentation says:

By default, template places the values from your data in the local scope via the with statement. However, you can specify a single variable name with the variable setting. This can significantly improve the speed at which a template is able to render.

_.template("Using 'with': <%= data.answer %>", {answer: 'no'}, {variable: 'data'});
=> "Using 'with': no"

So you can suppress the withs by using the variable option when compiling the templates; of course, this also means that you'll have to rewrite all the <%= ... %> parts of your templates to match what the variable option has to say (this should also speed up your templates so it might be worth it just for that).

In your case, you'd change the template to this:

<p><%= data.var1 %><%= data.var2 %>!</p> //<p>Hello World!</p>

and then you'd need to change the _.template call that is used to compile the templates to look like this:

var compiled_template = _.template(raw_template, null, { variable: 'data' });

You don't have to use data of course, you just need to use the same thing in both the templates and the _.template call.

I don't know how you'd change how your set up calls _.template but it shouldn't be that difficult. I suppose you could monkey patch _.template to have a default value for variable as a last resort.

Here's a simple demo that should illustrate what's going on: http://jsfiddle.net/ambiguous/Az8QM/

---

Alternatively, if we look at how "use strict" is scoped, we'll see that:

Strict mode applies to entire scripts or to individual functions.

So you can localize your strictness with something like this:

(function() {
    "use strict";
    // All your non-JST JavaScript goes here.
})();
// Append your JST out here.

You could also use two JavaScript files instead of just one:

1. One for your non-template JavaScript with "use strict" enabled.
2. A second one with just your JST, this one would not "use strict".