mplatts
10/30/2012 - 3:48 AM

Backbone Child Views Solution

Backbone Child Views Solution

index.html
content_copyfile_download
<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>