title: How does Backbone View render work?
body: <p>I have a model's view set up as follows:</p>
  
  <pre><code>var PlayerView = Backbone.View.extend({
      el: "div.player",
      template: _.template($("#playerTemplate").html()),
  
      render: function() {
          this.$el.append(this.template(this.model.toJSON()));
          return this;
      }
  });
  </code></pre>
  
  <p>and the main view is set up as follows:</p>
  
  <pre><code>var AppView = Backbone.View.extend({
      el: "#players",
  
      render: function() {
          var pView = new PlayerView({model: playerModel});
          this.$el.append(pView.render().$el);
      }
  });
  </code></pre>
  
  <p>If you notice the <code>render</code> of <code>AppView</code>, I am rendering the <code>PlayerView</code>  first, and then appending its <code>$el</code> to <code>AppView</code>'s $el. I was expecting an error situation here, as it would display <code>PlayerView</code> 2 times to main View as follows:</p>
  
  <ul>
  <li>First, in the <code>pView.render()</code> where I put content in <code>pView</code> and</li>
  <li>Second, in the same line where I append pView's <code>$el</code> to main view.</li>
  </ul>
  
  <p>But it just appends the <code>pView</code> only once. How does this work? </p>
  
  <p>I am not sure I have explained my question clearly; I can add more context if required. </p>