Question

So basically I’ve been toying with this pattern of pubsub with subviews re-rendering when called by parent ‘controller’ view (sorry if that’s confusing). If the subviews are based on a fetch of a collection or model (not shown below), sometimes they aren’t rendered in the correct order I need them too, ie if SubView1 is a small nav for Subview2, I don’t want it below SubView2.

I figure there has to be a pattern for such a common problem. Lemme know if this doesn’t make sense and I will clarify. But the basic situation I’m dealing with is below.

markup:

 <div id="main-container">
   <div class="inner-container"></div>
 </div>

js:

 var ToggleNavView = Backbone.View.extend({
    //let's say this template has two links
    template: Handbars.compile(linkstmpl),

    el: $('#main-container'),
    events: {
      "click a": "toggleViews"
    }
    initialize: function(){
      _.bindAll(this, 'render', 'toggleViews');

      // whoa, nice looking event aggregator http://bit.ly/p3nTe6
      this.vent = _.extend({}, Backbone.Events);

      this.render();
    },
    render: function(){
       $(this.el).append(this.tmpl);

       // suppose subviews below are declared as modules above with, say, requirejs
       var sub1 = new SubView1({ vent: this.vent }),
           sub2 = new SubView2({ vent: this.vent });


    },

    toggleViews: function(e){
      e.preventDefault();

      // get name of section or view you're toggling to
      var section = $(e.currentTarget).data('section');

      // publish events to subscribers
      this.vent.trigger('toggleInboxViews', this, section);


    },

   });

   var SubView1 = Backbone.View.Extend({
      template: Handlebars.compile(tmpl1),
      initialize: function(ops){
        _.bindAll(this, 'render', 'removeOrRerender');

        this.vent = ops.vent || null;
        this.render()
      },
      render: function(){
        $(this.el).append(this.template()).appendTo($(".inner-container"))
      },

      removeOrRerender: function(obj, section){
        if( section == 'my-section'){
          this.render();
        } else if( section == 'other-section' ) {
          $(this.el).fadeOut();
        }
      },

    })

    // another subview with same functionality etc... 

    // init view
    new ToggleNavView();

Answer 1

If you need your sub-views to show up in specific places then the parent view should define that structure and the sub-views should be told where to render themselves. Then it won’t matter what order things are draw in as the overall structure doesn’t change.

For example, if you want one sub-view to appear at the top and the other below it, the main view should look like this:

<div id="main-view">
    <div id="sub1"></div>
    <div id="sub2"></div>
</div>

then the main view would render the sub-views with something like this:

 var sub1 = new SubView1({ el: this.$el.find('#sub1'), vent: this.vent }),
 var sub2 = new SubView2({ el: this.$el.find('#sub2'), vent: this.vent });

By specifying the el for the sub-views, their location on the page is no longer their problem and they won’t shift positions if they’re rendered in a different order. A happy side effect of this structure is that the sub-views are only concerned with themselves and are nicely self-contained; the parent view just needs to put the pieces in the right place by structuring its template properly and everything just works.

Here’s a simple demo that might clarify the structure: http://jsfiddle.net/ambiguous/9u3S5/