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
What's the Significant Use of Unary Plus and Minus Operators
Is JavaScript Supported in an Email Message
What Techniques Can Be Used to Define a Class in JavaScript, and What Are Their Trade-Offs
Sort Array by Firstname (Alphabetically) in JavaScript
How to Fix Error: Listen Eaddrinuse While Using Nodejs
Repeat a String in JavaScript a Number of Times
Javascript: Filter() for Objects
How to JSON.Stringify an Es6 Map
Insert HTML at Caret in a Contenteditable Div
Does IE9 Support Console.Log, and Is It a Real Function
What Is Meant by 'First Class Object'
Webdriver Click() VS JavaScript Click()
How to Access Svg Elements with JavaScript
How to Sort 2 Dimensional Array by Column Value
Determining Image File Size + Dimensions via JavaScript
React Native - Image Require Module Using Dynamic Names
How to Access a JavaScript Object Which Has Spaces in the Object's Key