8

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.

mu is too short
  • 426,620
  • 70
  • 833
  • 800
adampetrie
  • 1,130
  • 1
  • 11
  • 23
  • Are you using precompiled Underscore templates somewhere? The only `with` in Underscore is inside the code that `_.template` generates so no one should even be aware of `with` being used unless they're looking at the compiled template functions that `_.template` produces. – mu is too short Sep 08 '13 at 02:15
  • Just so I understand, you're asking if I'm using under _.template() anywhere? Yes I am. I am assuming then that I need to be more selective with strict mode in that file? – adampetrie Sep 08 '13 at 02:32
  • @mu is too short - I did some more digging. I am using JST templates throughout the application. The precompiled templates.js uses with statements throughout it. So my question then becomes how can I resolve this? If I remove the `use strict;` directives in the view files that have JST templates and then run `grunt --force` and ignore the jshint errors, I still get the same end result with the minified js. Thoughts? Thanks. – adampetrie Sep 08 '13 at 02:54

1 Answers1

18

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".
mu is too short
  • 426,620
  • 70
  • 833
  • 800
  • Thank you very much for a well thought out answer. I believe that the solution to my problem is in there somewhere, but I am unable to translate what you've said into working code. I have provided a sample above of what I am working with. If you would, please show me how to convert it to a working solution. Ideally I'd like to convert my templates for the performance improvements. Thanks again. – adampetrie Sep 08 '13 at 04:57
  • I added a bit more for the first approach. I tend to use the Rails asset pipeline for this sort of thing so I can't be more specific. – mu is too short Sep 08 '13 at 17:36
  • Thanks again. I was able to solve the _.template calls by altering my grunt task to use the templateSettings options. I've edited my question to show what was needed. Cheers. – adampetrie Sep 08 '13 at 18:50
  • Cool, thanks for filling in the missing bits I didn't know about. – mu is too short Sep 08 '13 at 19:14