title: has no method 'toJSON' error in my view
body: <p>I'm learning backbone.js and I'm building my first multimodule app. I'm getting an error that I've never seen before and I think I know the reason, but I can't see how to fix it. I believe it's because the model isn't actually available to the view yet, but I can't see why.</p>
  
  <p>The error is:</p>
  
  <p>Uncaught TypeError: Object function (){ return parent.apply(this, arguments); } has no method 'toJSON'</p>
  
  <p>This is for line 11 in my view, msg.App.MessageListItemView.</p>
  
  <p>Here's my model:</p>
  
  <pre><code>var msgApp = msgApp || {};
  
  msgApp.Message = Backbone.Model.extend();
  </code></pre>
  
  <p>Here's my collection:</p>
  
  <pre><code>var msgApp = msgApp || {};
  
  msgApp.MessageCollection = Backbone.Collection.extend({
      model: msgApp.Message,
      url: MESSAGES_API // Call to REST API with Tastypie
  });
  </code></pre>
  
  <p>Here's my list view:</p>
  
  <pre><code>var msgApp = msgApp || {};
  
  msgApp.MessageListView = Backbone.View.extend({
  
      el: '#gps-app',
  
      initialize: function() {
  
          this.collection = new msgApp.MessageCollection();
          this.collection.fetch({reset: true});
          this.render();
          this.listenTo( this.collection, 'reset', this.render );
  
      },
  
      // render messages by rendering each message in it's collection
      render: function() {
  
          this.collection.each(function(item){
              this.renderMessage(item);
          }, this);
      },
  
      // render a message by creating a MessageView and appending the the element it renders to the messages element
      renderMessage: function(item) {
          var messageView = new msgApp.MessageListItemlView({
              model: msgApp.Message
          });
          this.$el.append(messageView.render().el);
      }
  
  });
  </code></pre>
  
  <p>Here's my item view:</p>
  
  <pre><code>var msgApp = msgApp || {};
  
  msgApp.MessageListItemlView = Backbone.View.extend({
  
      tagName: 'li',
      className: 'message-list-item',
      template: _.template($('#messageListItem').html()),
  
      render: function() {
          this.$el.html(this.template(this.model.toJSON()));
          return this;
      }
  
  });
  </code></pre>
  
  <p>And here is my router:</p>
  
  <pre><code>var AppRouter = Backbone.Router.extend({
  
      routes: {
          'messages/': 'allMessages',
      },
  
      allMessages:function() {
          this.messageList = new msgApp.MessageCollection();
          this.messageListView = new msgApp.MessageListView({model:this.messageList});
          console.log('I got to messages!');
      },
  
   });
  
  var app_router = new AppRouter;
  </code></pre>
  
  <p>I'm looking for any and all suggestions. I'm a noob to begin with, and this is my first multimodule app so I'm having a little trouble managing scope I think.</p>
  
  <p>Thanks for you time!</p>