JSFiddle - React, Tailwind, and code Playground

by Eric Howe

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script id="tmpl-books" type="text/template">
    {{ _.each(items, function(item) { }}
        <ul>
            <li>Title: {{= item.title }}</li>
            <li>Author: {{= item.author }}</li>
        </ul>
    {{ }); }}
</script>

JavaScript

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

var list = {
    items: [
        { "title": "Myst: The Book of Atrus", "author": "Rand Miller" },
        { "title": "The Hobbit", "author": "J.R.R. Tolkien" },
        { "title": "Stardust", "author": "Neil Gaiman" }
    ]
};

var tmplMarkup = $('#tmpl-books').html();
var compiledTmpl = _.template(tmplMarkup, list);
$('body').append(compiledTmpl);