0

I'm following along with this tutorial (in french only) https://github.com/k33g/articles/blob/master/2011-08-14-BB-VIEWS.md which uses underscore templates with Backbonejs.

The tutorial says to put this template below in index file.

      <script type="text/template" id="doc-template">
            <span><%= id %></span>
            <span><%= title %></span>
            <span><%= test %></span>
            <span><%= keywords %></span>
       </script>


   <div id='doc-container'></div>

I'm putting it in index.html.erb, however, the tutorial author is not using rails. It's necessary for me to use erb because I also include page specific content using rails content_for helpers.

When I try to view the page, I get an undefined local variable or method error

undefined local variable or method `id' for #<#<Class:0x007fd9c3a133b8>:0x007fd9c5066d90>

If I remove those variables from the templates it's still not rendering content to the page.

Can anyone explain what I'm doing wrong to render the data?

Other Backbone view related code

The tutorial initializes and renders a view in the appropriate container...

        el : $('#doc-container'),
        initialize : function() {
            this.template = _.template($('#doc-template').html());


            _.bindAll(this, 'render');
            this.model.on('change', this.render);

        },

        render : function() {
            var renderedContent = this.template(this.model.toJSON());
            $(this.el).html(renderedContent);
            return this;
        }

Update

I'm having the same problem when I follow the tutorials instructions for a collection view. It throws an error for underscore's each method

undefined local variable or method `_' for #<#<Class:0x007fd9c3a133b8>:0x007fd9c2c78a78>

template in index.html.erb

<script type="text/template" id="docs-collection-template">
    <ol>
      <% _.each(docs, function(doc) { %>
        <li><%= doc.id %> : <%= doc.title %></li>
      <% }); %>
    </ol>
</script>
Leahcim
  • 40,649
  • 59
  • 195
  • 334
  • possible duplicate of [Embedding an ejs template inside of an erb template](http://stackoverflow.com/questions/4716557/embedding-an-ejs-template-inside-of-an-erb-template) – Bobby Jan 09 '13 at 21:52
  • 1
    @Soldier.moth it's not a duplicate because that question's not about underscore templates – Leahcim Jan 09 '13 at 21:58
  • Actually, possible duplicate of http://stackoverflow.com/questions/7514922/rails-with-underscore-js-templates – Lukas Jan 09 '13 at 22:16
  • @Lukas your answer provides more information than the other page – Leahcim Jan 09 '13 at 22:23

2 Answers2

3

The problem is that Underscore is using the same syntax for templating as ERB, so it is conflicting. You need to tell Underscore to use a different syntax. From the Underscore docs:

If ERB-style delimiters aren't your cup of tea, you can change Underscore's template settings to use different symbols to set off interpolated code. Define an interpolate regex to match expressions that should be interpolated verbatim, an escape regex to match expressions that should be inserted after being HTML escaped, and an evaluate regex to match expressions that should be evaluated without insertion into the resulting string. You may define or omit any combination of the three. For example, to perform Mustache.js style templating.

So, somewhere in your JavaScript code, before you compile the template, add the following code:

_.templateSettings = {
    interpolate : /\{\{=(.+?)\}\}/g,
    escape : /\{\{-(.+?)\}\}/g,
    evaluate: /\{\{(.+?)\}\}/g,
};

Then, anywhere in your template where you have <% %>, change it to {{ }}, change <%= %> to {{= }}, and change <%- %> to {{- }}.

Lukas
  • 9,765
  • 2
  • 37
  • 45
0

You can use <%%= variable %>. Rails output for this will be <%= variable %>.