Backbone Template
Standard fiddle
HTML
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<div>
<h1>Parent Child example</h1>
<div id="container">a</div>
</div>
<script type="text/template" id="parent_template">
<div> <h1> Parent Heading </h1>
<div id="child"></div> </div>
</script>
<script id="child_template" type="text/html">
<div> <h1> Child Heading </h1>
<div >Child Content</div> </div>
</script>
JavaScript
ParentView = Backbone.View.extend({
initialize: function () {
this.render();
var child_view = new ChildView({
el: $("#child")
});
},
render: function () {
var template = _.template($("#parent_template").html(), {});
this.el.html(template);
}
});
ChildView = Backbone.View.extend({
initialize: function () {
this.render();
},
render: function () {
var template = _.template($("#child_template").html(), {});
this.el.html(template);
}
})
var parent_view = new ParentView({
el: $("#container")
});