List not rendering in underscore.js

Question

I am a newby to underscore.js, I'm expecting the following to render the list passed to it but instead it renders this :

Title: {{title}}
Author: {{author}}

heres a snippet:

<script src="/Scripts/underscore.js"></script>
    <script id="tmpl-books" type="text/template">
        <ul>
            <li>Title: {{title}}</li>
            <li>Author: {{author}}</li>
        </ul>
    </script>

    <script type="text/javascript">
                var list =
                [
                    {
                        "title": "Myst: The Book of Atrus",
                        "author": "Rand Miller"
                    },
                    {
                        "title": "The Hobbit",
                        "author": "J.R.R. Tolkien"
                    },
                    {
                        "title": "Stardust",
                        "author": "Neil Gaiman"
                    }
                ];

       $(document).ready(function () { 
            var tmplMarkup = $('#tmpl-books').html();
            var compiledTmpl = _.template(tmplMarkup, list);
            $('#rendered').html(compiledTmpl);
     });
</script>

In the Html body I have a div with the id="rendered"

<html> 
 <body>
  <div id="rendered"></div> 
 </body>
</html>

McGarnagle · Accepted Answer · 2013-09-09T16:24:16.047

1

The curly-braces are the Mustache.js style. Underscore uses the <%= %> syntax:

<li>Title: <%= title %></li>

Also, the Underscore.js template expects the names "title", etc, to be in the object-map you pass. You can't pass an array, as far as I know. Instead, wrap the array in "items" like this:

var list = { items: [ ... ] };

And use a template that iterates over them:

 <% _.each(items, function(item) { %>
    <ul>
        <li>Title: <%= item.title %></li>
        <li>Author: <%= item.author %></li>
    </ul>
 <% }); %>

Fiddle demo

edited Sep 09 '13 at 16:24

answered Sep 09 '13 at 16:07

McGarnagle

101,349
31
229
260

I get a compilation error when I attempt :
Title: <%= title %>

Fabii

Sep 09 '13 at 16:15

If I try using the templateSettings interpolate, its says that "title" not defined. – Fabii Sep 09 '13 at 16:16

@Fabii sorry, I completely missed that you were using an array. See my updated answer, with demo. – McGarnagle Sep 09 '13 at 16:25

1

@GeorgeJempty I didn't look at your answer, just did some reading on Underscorejs.org. I'm not sure about that approach, though, except for simple templates -- for example, I don't think it would work with script blocks? – McGarnagle Sep 09 '13 at 16:33

@McGarnagle, yeah you are right it does not work with the script blocks. – Fabii Sep 09 '13 at 16:50

Sorry I was a bit hasty in accepting this answer. I am running my code is VS 2012 , its seems to be get a runtime compilation error on this line: <% _.each(items, function(item) { %> . Can not resolve symbol. – Fabii Sep 09 '13 at 17:02

1

I think I need to add : _.templateSettings = { interpolate: /\{\{(.+?)\}\}/g, // print value: {{ value_name }} evaluate: /\{%([\s\S]+?)%\}/g, // excute code: {% code_to_execute %} escape: /\{%-([\s\S]+?)%\}/g }; – Fabii Sep 09 '13 at 17:11

@Fabii that's really a problem with Visual Studio's HTML parser -- it doesn't recognize the templating stuff. Not sure if there's a good solution to this, other than just don't use VS to edit templated HTML. Similar question here: http://stackoverflow.com/q/8134707/1001985 – McGarnagle Sep 09 '13 at 17:54

2

Problem solved here: http://stackoverflow.com/questions/18703874/templatesettings-not-working/18704142?noredirect=1#18704142 – Fabii Sep 09 '13 at 18:02

score 1 · Answer 2 · answered Sep 09 '13 at 16:09

1

You seem to be trying to use "mustache-style" template syntax, instead of underscore's. Underscore does let you use mustache-style though, see the docs at: http://underscorejs.org/#template, in particular the following block of code:

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

var template = _.template("Hello {{ name }}!");
template({name: "Mustache"});

answered Sep 09 '13 at 16:09

Dexygen

12,287
13
80
147

For my example, if I use the mustache-style and _.templateSettings, I get a title not defined error, is my list syntax correct? – Fabii Sep 09 '13 at 16:19
Sorry I've never configured underscore to use mustache style templates....have you tried using underscore's built-in templating? – Dexygen Sep 09 '13 at 16:21

List not rendering in underscore.js

2 Answers2