Underscore template throwing variable not defined error

by

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="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>

More Related Contents:

  1. Explanation of …
  2. Loading Backbone and Underscore using RequireJS
  3. External template in Underscore
  4. How to use if statements in underscore.js templates?
  5. correctly implement backbone comparators
  6. What is the difference between these Backbone/Underscore .bind() methods?
  7. Most efficient method to groupby on an array of objects
  8. JavaScript merging objects by id
  9. Best way to iterate over an array without blocking the UI
  10. Add property to an array of objects
  11. Backbone.js Empty Array Attribute
  12. using underscore’s “difference” method on arrays of objects
  13. using lodash .groupBy. how to add your own keys for grouped output?
  14. Javascript group objects by property [closed]
  15. Sort an object array by custom order
  16. “Single-page” JS websites and SEO
  17. Backbone.js and pushState
  18. how to break the _.each function in underscore.js
  19. Backbone: event lost in re-render
  20. Backbone.js get and set nested object attribute
  21. What is context in _.each(list, iterator, [context])?
  22. Backbone 0.9.9: Difference between listenTo and on
  23. In Javascript, what does this underscore mean?
  24. Filtering object properties based on value
  25. Split JavaScript array in chunks using Lodash
  26. Sorting an Array of JavaScript Objects a Specific Order (using existing function)
  27. start javascript code with $(function, etc
  28. Extending React.js components
  29. Super in Backbone
  30. Remove duplicates in an object array Javascript

Leave a Comment