Learning About Dust.js
Here's a zip of a working example, I but I couldn't get it to work exactly how I wanted to. Take a look at it, and if you can set the selected value in the drop down list, please let me know.
I stumbled into Dust.js and it seems like a great templating tool. So let the learning begin. One thing I really love about it so far is that there's a page you can go to to test your templates. What a great tool for learning!
This is the project home page:
http://akdubya.github.com/dustjs/
But note that when I tried to use the template testing tool on this page, some of my templates were not working and I couldn't figure out why. So I posted my problem on stackoverflow and found out that I should be using this page to test my templates:
http://linkedin.github.com/dustjs/test/test.html
The best tutorial I've found thus far:
https://github.com/linkedin/dustjs/wiki/Dust-Tutorial#wiki-Dust_Tutorial
Here's a video tutorial:
A video introduction to Dust.js
This is the data model that I used to create my very first template:
{
"name": "SOME NAME",
"favorite_food": 1,
"food_options": [{id:1, value: "Ice Cream"},{id:2, value: "Pizza"},{id:3, value: "Fish"}]
}
And here's my first template, it's using the data model to output an h1 followed by a select box:
<h1>{name}</h1>
<select>
{#food_options}
<option value="{id}">
{value}-{favorite_food}
</option>
{/food_options}
</select>
To spice it up a bit, I added the @eq logic helper to set the selected option based on the value of the favorite_food property:
<h1>{name}</h1>
<select>
{#food_options}
<option value="{id}"{@eq key=id value=favorite_food} selected="true"{/eq} >
{value}
</option>
{/food_options}
</select>
Here's some code that shows how to actually use a template. In order to use Dust.js with Backbone.js (as an example), you need to create a function that takes your model object and renders the html for it.
In order to use Dust in your page:
<script src="https://raw.github.com/linkedin/dustjs/master/dist/dust-full-1.1.1.js" type="text/javascript" charset="utf-8"></script>
Here's a sample template that you can put in your html page:
<script type="text/x-template" id="building-list-item-template">
<li buildingId="{id}" class="building-list-item">
<div class="building-name">{name}</div>
</li>
</script>
To get a template function that you can pass your data into and get HTML back:
// compile the template
var buildingTemplate = dust.compile($("#building-list-item-template").html(),"tpl");
// load the compiled template into the dust template cache
dust.loadSource(buildingTemplate);
// create a function that takes the data object
// in this case it's a 'building' object
var template = function(building) {
var result;
dust.render("buildingTemplate", building, function(err, res) {
result = res;
});
return result;
};
To use the template function:
//create a data object that the template will render
var building = {
id: 1,
name: "Empire State Building"
};
// append the template to it's host container
$("#someID").html(template(building));