mplatts · October 30, 2012 03:48
diff --git a/index.html b/index.html
 <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>
	<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>