27

I'm doing something wrong here but I can't see it! Im trying to loop an array in a underscore template. It doesn't work though so I'm missing something, Here's my code, my templates work fine otherwise, it's just the _.each stuff that's bugging out:

<script type="text/template" id="PageContent">
    <div class="col2">
        <@ _.each([0,1,2,3,4], function(i) { @>  <p><@ i @></p> <@ }); @>
    </div>    
</script>

I've also done some template settings like this:

_.templateSettings = {
    interpolate: /\<\@(.+?)\@\>/gim
};
Joseph at SwiftOtter
  • 4,276
  • 5
  • 37
  • 55
Joel
  • 3,166
  • 5
  • 24
  • 29

1 Answers1

65

Because you've only defined an interpolation regex in your custom template settings, underscore doesn't know when to evaluate expressions. When you define custom template settings you need to define and differentiate between interpolation and evaluation. From the underscore template() documentation:

Define an interpolate regex, and an (optional) evaluate regex to match expressions that should be inserted and evaluated, respectively. If no evaluate regex is provided, your templates will only be capable of interpolating values.

In a standard (no custom settings) template the difference is evaluation: <% %> and value interpolation: <%= %>.

So, for example, your template above should be (with standard template settings): 

<% _.each([0,1,2,3,4], function(i) { %>  <p><%= i %></p> <% }); %>

If you want to continue using custom settings you'll need to define an evaluation regex in _.templateSettings as well. Based on your questions and comments something like:

   _.templateSettings = {
      interpolate: /\<\@\=(.+?)\@\>/gim,
      evaluate: /\<\@(.+?)\@\>/gim
  };

And then update your template to use the evaluation form around code blocks and the interpolation form around values, like so:

<script type="text/template" id="pageContent">
    <div class="col2">
        <@ _.each([0,1,2,3,4], function(i) { @>  <p><@= i @></p> <@ }); @>
    </div>    
</script>

source: http://documentcloud.github.com/underscore/#template

mjtognetti
  • 736
  • 4
  • 4
  • Hi!Thank you for a great answer. I've now updated to: _.templateSettings = { interpolate: /\<\@\=(.+?)\@\>/gim, evaluate: /\<\@(.+?)\@\>/gim, }; But it doesn't change anything I'm afraid, I get the same errors.. – Joel Sep 16 '11 at 06:32
  • hmm, can you post your updated template code as well as the errors you're getting? – mjtognetti Sep 16 '11 at 16:51
  • updated the answer instead of posting template and settings in these comments – mjtognetti Sep 16 '11 at 17:05
  • 1
    i realise this is an old thread, but I got this working by changing the regex to use "/g", instead of "/gim" at the end of each expression. thought it might help someone who stumbled upon this thread! entire regex: _.templateSettings = { interpolate: /\<\@\=(.+?)\@\>/g, evaluate: /\<\@(.+?)\@\>/g }; – royse41 Oct 12 '12 at 09:55
  • defining regex for both interpolation and evaluation solved my problem. – Anand Jul 07 '14 at 14:55