Skip to content

Instantly share code, notes, and snippets.

@mplatts
Created Oct 30, 2012
Embed
What would you like to do?
Backbone Child Views Solution
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://raw.github.com/documentcloud/underscore/master/underscore.js"></script>
<script src="https://raw.github.com/documentcloud/backbone/master/backbone.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/template" id="leveloneview-template">
<div class="view">
<h1>LevelOneView</h1>
<div class="subview-two"></div>
</div>
</script>
<script type="text/template" id="leveltwoview-template">
<div class="view">
<h2>LevelTwoView</h2>
<div class="subview-three"></div>
</div>
</script>
<script type="text/template" id="levelthreeview-template">
<div class="view">
<h3>LevelThreeView</h3></div>
<div class="subview-four"></div>
</div>
</script>
<script type="text/template" id="levelfourview-template">
<div class="view"><h4>LevelThreeView</h4></div>
</script>
<script>
var LevelOneView = Backbone.View.extend({
template: _.template($('#leveloneview-template').html()),
events: {
"click h1": "clickEvent"
},
initialize: function(options) {
console.log("init level one");
this.subview = new LevelTwoView();
},
clickEvent: function(e) {
this.render();
console.log("click level 1");
},
render: function() {
console.log("render one");
this.$el.html(this.template());
this.renderChildView(this.subview, ".subview-two")
return this;
},
renderChildView: function(view, selector) {
this.$el.find(selector).html(view.render().el);
view.setElement(this.$el.find(selector + ":first"));
}
});
var LevelTwoView = Backbone.View.extend({
template: _.template($('#leveltwoview-template').html()),
events: {
"click h2": "clickEvent"
},
initialize: function(options) {
console.log("init level two")
this.subview = new LevelThreeView();
},
clickEvent: function(e) {
console.log("click level 2");
},
render: function() {
console.log("render two");
this.$el.html(this.template());
this.$el.find(".subview-three").html(this.subview.render().el);
return this;
}
});
var LevelThreeView = Backbone.View.extend({
template: _.template($('#levelthreeview-template').html()),
events: {
"click h3": "clickEvent"
},
initialize: function(options) {
this.subview = new LevelFourView();
},
clickEvent: function(e) {
console.log("click level 3");
},
render: function() {
console.log("render three");
this.$el.html(this.template());
this.$el.find(".subview-four").html(this.subview.render().el);
return this;
}
});
var LevelFourView = Backbone.View.extend({
template: _.template($('#levelfourview-template').html()),
events: {
"click h4": "clickEvent"
},
clickEvent: function(e) {
console.log("click level 4");
},
render: function() {
console.log("render four");
this.$el.html(this.template());
return this;
}
});
window.view = new LevelOneView()
$("#app").html(view.render().el)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment