JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/documentcloud/underscore/1.4.2/underscore.js"></script>
<script src="https://raw.github.com/documentcloud/backbone/0.9.2/backbone.js"></script>
<script src="https://raw.github.com/tbranyen/backbone.layoutmanager/master/backbone.layoutmanager.js"></script>
<div class="main">
<div class="list-title"></div>
<ol class="list-items"></ol>
</div>
<!-- Layout template -->
<script type="template" id="main">
<h1>My super important list...</h1>
<p></p>
</script>
<!-- Item template -->
<script type="template" id="item">
<li>
<%= name %>
</li>
</script>
JavaScript
Backbone.LayoutManager.configure({
partial: function(root, name, el, append) {
var $root = name ? $(root).find(name) : $(root);
this[append ? "append" : "html"]($root, $(el).children().first());
}
});
Backbone.LayoutView.extend({
afterRender: function() {
this.setElement(this.el.firstChild);
this.delegateEvents();
}
});
var Item = Backbone.LayoutView.extend({
template: "#item",
events: {
'click': 'clickItem'
},
clickItem: function() {
alert('just clicked');
},
serialize: function() {
return { name: this.model.get("name") };
}
});
var List = Backbone.LayoutView.extend({
el: ".list-items",
beforeRender: function() {
this.collection.each(function(model) {
this.insertView(new Item({
model: model
}));
}, this);
}
});
var ListTitle = Backbone.LayoutView.extend({
template: "#main",
});
var main = new Backbone.Layout({
el: '.main',
views: {
".list-title": new ListTitle(),
".list-items": new List({
collection: new Backbone.Collection([
{ name: "Tom" },
{ name: "Mary" },
{ name: "Martin" }
])
})
}
});
main.render();