title: Smart rendering subviews in Backbone
body: <p><strong>tl;dr:</strong> When moving from page to page, change/destroy only these blocks that need it (not re-rendering whole page). And keep application router as simple as possible.</p>
  
  <p>I'm new to backbone and all of the examples to get started with it that I've seen were about small apps with a single page that changes a little sometimes (adding/removing some elements, but never completely re-rendering). But when I started doing my app which is a little bit more complex, I faced the problem of subviews organization...</p>
  
  <p><strong>Problem:</strong> When every page of application consists of subviews (each subview can have another subviews, ie nested subviews), which are responsible for displaying their blocks in the page, a reasonable desire would be not to re-render blocks that not changing when you're navigating through pages. Sometimes you need to re-render whole page, when it's completely different from previous, sometimes just some blocks on the page. But in this case application router becomes monster-object that contains too much logic, so that it's hard to maintain.</p>
  
  <p><strong>What I want:</strong> I want my router to be like</p>
  
  <pre><code>define(['jquery', 'backbone'], function ($, Backbone) {
  
      return Backbone.Router.extend({
  
           routes: {
               "": "home",
               ..........
           },    
  
           home: function () {
               require(['views/home'], function (View) {
                   var view = new View({ el: $("body") });
                   view.render();
               });
           },
  
          ..........
  
      });
  });
  </code></pre>
  
  <p>So, my goal is to move logic for rendering subviews to views. So that view will decide what to do: render itself including subviews or just ask subviews to decide same question for themselves.</p>
  
  <p><strong>Possible solution:</strong> Thinking about it I come with idea of global object that contains tree of views as application state (e.g. <em>first_design(home(about, login))</em> ). And when we're moving to next page, that has the same main view (ie <em>first_design</em>) we don't render <em>first_design</em> view, but just it's subviews (in this case only <em>home</em>). And for every page in router we now need to manually define this tree of views. For example like this:</p>
  
  <pre><code>define(['jquery', 'backbone'], function ($, Backbone) {
  
      return Backbone.Router.extend({
  
           routes: {
               "": "home",
               "contacts": "contacts",
               ..........
           },    
  
           home: function () {
               require(['views/firstDesign', 'views/home', 'views/about', 'views/login'], function (FirstDesign, Home, About, Login) {
                   new FirstDesign({ el: $("body"), subviews: { new Home({ subviews: { new About(), new Login() } }) } });
               });
           },
  
           contacts: function () {
               require(['views/firstDesign', 'views/contacts'], function (FirstDesign, Contacts) {
                   new FirstDesign({ el: $("body"), subviews: { new Contacts() } });
               });
           },
  
          ..........
  
      });
  });
  </code></pre>
  
  <p><strong>So, the question is...:</strong> I believe i'm reinventing the wheel right now and obviously my wheel is not good enough (possibly even not round :D). So are there any implementations of what I need? Or if not, then how I should do it properly? Thanks!</p>
  
  <p>P.S: I'm using backbone.js with require.js. And sorry for my English, it's not my native language...</p>