Underscore Template Throwing Variable Not Defined Error

Underscore template throwing variable not defined error

You used to be able to parse and fill in an Underscore template in one go like this:

var html = _.template(template_string, data);

But as of Underscore 1.7.0, the second argument to _.template contains template options:

template _.template(templateString, [settings])

Compiles JavaScript templates into functions that can be evaluated for rendering. [...] The settings argument should be a hash containing any _.templateSettings that should be overridden.

You have to compile the template using _.template and then execute the returned function to get your filled in template:

var tmpl = _.template(template_string);
var html = tmpl(data);

// or as a one-liner, note where all the parentheses are
var html = _.template(template_string)(data);

In your case, it would look something like this:

var V = Backbone.View.extend({  el:'body',  render: function () {    var data = { lat: -27, lon: 153 };    var tmpl = _.template('<%= lat %> <%= lon %>');    this.$el.html(tmpl(data));    return this;  }});
var v = new V();
v.render();
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>

Underscore template Uncaught ReferenceError variable is not defined

Because template is a function and template( obj ) returns the string you are after, it does not return the string after you call it.

What your code is doing

var xxx = template();
this.$el.append(xxx);

what you should be doing

render: function(){
var template = _.template($('#dumb').html());
var vars = {amount:200};
var html = template(vars);
this.$el.append(html);
},

ReferenceError: variable is not defined with underscore template

A call of _.template returns a function which takes an object with template variables as the first argument.

So you should do this:

self.$list = $("#list");
var template = _.template('<%= foo %>')({foo: 'hello'});
self.$list.html(template);

and this:

_.each(categories, function(category){
console.log(category); //<-- ok
var template = _.template(self.$categoryTemplate.text())(category);
self.$list.append(template);
});

underscore _.template not recognizing variable

Try this

template = _.template("<h1>Temperature: <%= temp %> </h1>")({temp: 'test'})

Underscore JS template throwing Reference Error variable undefined

You may have upgraded Underscore recently, the signature of the _.template() function has changed since 1.7.0:

Underscore templates no longer accept an initial data object. _.template always returns a function now.

Here's a working version:

var jsonData = [{grossAmount:100},{grossAmount:200}];
var resultTemplate = "" +" <ul class='searchList'>" +" <% _.each(paymentActions,function(paymentActivity){ %>" +" <li><span class='amount visible-phone'>-<%= paymentActivity.grossAmount %></span>" +" </li>" +" <% }); %>" +" </ul>";
var template = _.template(resultTemplate)({paymentActions : jsonData});
console.log(template);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>

Ignoring undefined data / vars in an underscore template

No,

There is no actual fix for this due to the way underscore templates are implemented.

See this discussion about it:

I'm afraid that this is simply the way that with(){} works in JS. If the variable isn't declared, it's a ReferenceError. There's nothing we can do about it, while preserving the rest of template behavior.

The only way you can accomplish what you're looking for is to either wrap the object with another object like the other answer suggested, or setting up defaults.

undefined variable when rendering underscore template data in backbone

From the Underscore.js documentation

var compiled = _.template("hello: <%= name %>");

compiled({name: 'moe'});

=> "hello: moe"

It looks like you are not using the _.template method correctly. It returns a compiled template function that you can call with the data to render:

var compiledTemplate = _.template( homeTemplate, homeData );
this.$el.html( compiledTemplate( homeData ) );


Related Topics



Leave a reply



Submit