title: backbone js - Dynamic loading view: should el be the launcher, or should it be launched by a parent view?
body: <p>I have a question about the el tag on a dynamically loading view element.  I'm attaching a click listener to an <code>&lt;a&gt;</code> tag, which will dynamically load the view element (render it from a template, populate some content over ajax etc.).  Now I have currently implemented it as follows:</p>
  
  <pre><code>MyDynamicView = Backbone.View.extend({
      el: "a#dynamic-launcher",
      events: {
          "click": "launch"
      },
      initialize: function(){
          _.bindAll(this, "render");
      },
      launch: function(e){
          e.preventDefault();
          this.render();
      },
      render: function(){
                      // do template/ajax/whatever.
      }
  });
  </code></pre>
  
  <p>Which works fairly well, but it does preclude me from doing some things.  For example, if I wanted to add another event, which was triggered by something from within my new dynamic view, I couldn't do that (since the events only look below the parent <code>el</code>).</p>
  
  <p>So an alternative might be to have a parent view, which knows about what element launches the dynamic element, and then creates/renders it.</p>
  
  <pre><code>velo.AppView = Backbone.View.extend({
      el: "body",
      events: {
          "click a#dynamic-launcher": "launchDynamicView"
      },
      launchDynamicView: function(e){
          e.preventDefault();
          new MyDynamicView(); // Or something - Maybe I need to call render.  Not sure.
      }
  });
  </code></pre>
  
  <p>Does this second technique make more sense?</p>
  
  <p>Any guidance would be great!</p>
  
  <p>Thanks.</p>