This jQuery Plugin lets you easily bind Handlebars.js templates to DOM elements.
It's a simple and lean way to glue a model to a view.
- write your Handlebars template just inside the DOM element
- bind a model to the template
- supports any kind of model that is compatible to jQuery's data() API
- can render simple collections in combination with collection.jquery.js or compatible collections
Just include jQuery, Handlebars and handlebars.jquery.js in your HTML Head:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.5.1.min.js" charset="utf-8"></script>
<script src="handlebars-0.9.0.pre.4.js" charset="utf-8"></script>
<script src="handlebars.jquery.js" charset="utf-8"></script>
...
...
<h1 data-title="It's a headline!">{{title}}</h1>
...
<script style="text/javascript">
$('h1').template();
</script>
...
...
<ul>
<li>Some Fruit: {{name}}</li>
</ul>
...
<script style="text/javascript">
var banana = $({});
banana.data('name', 'Banana');
var apple = $({});
apple.data('name', 'Green Apple');
var fruits = $.collection(banana, apple);
$('ul').template();
</script>
...
results in:
<ul>
<li>Some Fruit: Banana</li>
<li>Some Fruit: Green Apple</li>
</ul>
See the demo folder for more examples.