title: How to render nested views in Backbone.js?
body: <p>I have a tree of categories and I would like to do rending using by Backbone.js instead of using jQuery or do rendering on the server-side. I have the following breakout that I described as template:</p>
  
  <pre><code>&lt;li&gt;
      &lt;select class="categories"&gt;
          &lt;option value=""&gt;Select&lt;/option&gt;
      &lt;/select&gt;
      &lt;input class="edit" type="button" value="Edit"&gt;
      &lt;input class="add" type="button" value="Add"&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>The tag <code>select</code> I render separately as inner view. When I change select I need get nested categories from the server and append them to the tag <code>li</code> using the template above wrapped in the tag <code>ul</code>. In outer view I create inner view and listen events on click at editing and adding. I have a trouble with the last events when the level of nesting is more than one because they are fires equal times to the level of nesting. What am I doing wrong?</p>
  
  <p>The below code snippet shows how I work with outer and inner views:</p>
  
  <pre><code>    var CategoriesInnerView = Backbone.View.extend({
          tagName:       'select',
          initialize:    function(){
              _.bindAll(this,'addOne','addAll');
              this.collection.bind('reset',this.addAll);
          },
          addOne:        function(category){
              this.$el.append(new CategoryView({model:category}).render().el);
          },
          addAll:        function(){
              this.collection.each(this.addOne);
          },
          events:        {
              'change':'changeSelected'
          },
          changeSelected:function(){
              var children = new Categories();
              children.url = 'categories/' + this.$el.val();
  
              var childrenView = new CategoriesOuterView({collection:children});
              this.$el.parent().find('ul').remove();
              this.$el.parent().append(childrenView.render().el);
  
              children.fetch();
          }
      });
  
      var CategoriesOuterView = Backbone.View.extend({
          tagName:   'ul',
          template:  _.template($('#categories-template').html()),
          initialize:function(){
              this.inner = new CategoriesInnerView({collection:this.collection});
          },
          render:    function(){
              this.$el.html(this.template);
  
              this.inner.setElement(this.$('select')).render();
  
              return this;
          },
          events:    {
              'click .edit':'edit',
              'click .add': 'add'
          },
          edit:    function(){
              this.renderForm(this.collection.get(this.inner.$el.val()));
          },
          add:    function(){
              this.renderForm(new Category());
          },
          renderForm:function(category){
              // some code to render the form
          }
      });
  </code></pre>