How to include data source in underscore template inside text/html?

Question

Here's my code

<script type="text/html" id='usageList'>
            <table cellspacing='0' cellpadding='0' border='1' >
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                        <th>LastName</th>
                    </tr>
                </thead>

                <tbody>
                    /* I want to include data source via ajax or some mechanism here */
                    <%_.each(items,function(item,key,list){ %>
                    <% var f = item.name; %><!-- create more variables -->
                    <% var l= item.lastName; %>
                    <tr>
                        <!-- use variables -->
                        <td><%= key %></td>
                        <td class="<%= f %>"><%= f %></td>
                        <td class="<%= l %>"><%= l %></td>
                    </tr>
                    <% }); %>
                </tbody>
            </table>
        </script>

jaime · Accepted Answer · 2012-11-23 15:06:00Z

1

First, get the template into a variable

var template = $('#usageList').html();

Then, make an Ajax request. Using the _.template process the data received and add it to a DOM node

$.getJSON('ajax/test.json', function(data) {
    $('#output').html(_.template(template,{items:data}));
});

Data returned must follow this format

[
    {'name':'john', 'lastName':'M'},
    {'name':'jean', 'lastName':'N'},
    {'name':'carl', 'lastName':'K'},
    {'name':'peter', 'lastName':'B'}
]

Check this JSFiddle: http://jsfiddle.net/jaimem/2gPYZ/

answered Nov 23, 2012 at 15:06

jaime

42k10 gold badges85 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to include data source in underscore template inside text/html?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related