title: Backbone this confusion
body: <p>I have the following code:</p>
  
  <pre><code>var GoalPanelView = Backbone.View.extend({
  
      // Bind to the goal panel DOM element
      el: $("#sidebar-goals"),    
  
      // Initialize the collection
      initialize: function() {
          this.collection = Goals;
          this.collection.bind('add', this.appendItem);
      },
  
      // Create a new goal when a user presses enter in the enter goal input
      createOnEnter: function(e) {
          if (e.keyCode != 13) return;
          this.addItem();
          //Goals.create(this.newAttributes());           
      },
  
      // Add the goal item to the goal list
      addItem: function() {
          var goal = new Goal();
          goal.set(this.newAttributes());
          var goalsElem = this.el;
          this.collection.add(goal);
          $(this.el).children("#enter-goal").val('');
      },
  
      // Append DOM element to the parent el
      appendItem: function(item) {
          var goalView = new GoalView({
              model: item,
          });
          $(this.elem).append(goalView.render().el);
      }
  
  });
  </code></pre>
  
  <p>My problem is inside of the <code>appendItem</code> function. When I use <code>this</code> inside of the <code>appendItem</code> function, I believe that it thinks that the <code>this</code> refers to the <code>this.collection</code> rather than the <code>GoalPanelView</code>. How would I get the <code>this</code> to refer to the <code>GoalPanelView</code> rather than the <code>collection</code>? I tried to pass another variable into the <code>appendItem</code> function which held the contents of <code>this.elem</code>, but it didn't seem to work.</p>
  
  <p>One thing that worked was when I moved the <code>appendItem</code> function into the <code>collection</code> and changed the initialization to bind to <code>this.collection.bind('add', appendItem);</code> but I do not want to put the <code>view</code> stuff into the <code>collection</code> logic.</p>