title: Create a new model in View.event Backbone.js
body: <p>Let's say I'm building a simple app, that allows me to add Movies and display them in a list. Here's my code (body):</p>
  
  <pre><code>&lt;div id="container-addmovie"&gt;&lt;/div&gt;
  &lt;p&gt;Movies:&lt;/p&gt;
  &lt;ul id="container-movie"&gt;&lt;/ul&gt;
  
  &lt;!-- templates  --&gt;
  &lt;!-- Movie template --&gt;
  &lt;script type="text/template" id="template-movie"&gt;
      &lt;li&gt;&lt;strong&gt;Title: &lt;/strong&gt;&lt;%=title%&gt;; &lt;strong&gt;Rating: &lt;/strong&gt;&lt;%=mpaaRating%&gt;&lt;/li&gt;
  &lt;/script&gt; 
  &lt;!-- add movie template --&gt;
  &lt;script type="text/template" id="template-addmovie"&gt;
      &lt;input type="text" name="" id="input-addmovie"&gt;
      &lt;input type="button" name="" id="button-addmovie" value="Add new movie"&gt;
  &lt;/script&gt; 
  
  &lt;!-- models --&gt;
  &lt;!-- movie model --&gt;
  &lt;script type="text/javascript"&gt;
      var Movie = Backbone.Model.extend({});
  &lt;/script&gt;
  
  &lt;!-- views --&gt;
  &lt;!-- movie view --&gt;
  &lt;script type="text/javascript"&gt;
      var MovieView = Backbone.View.extend({
          el: "#container-movie",
          template: _.template($("#template-movie").html()),
          initialize: function() {
              // model reder
              this.render();
              // change event
              this.listenTo(this.model, "change", this.render);
          },
          render: function() {
              console.log("MovieView render; Movie Title: " + this.model.get("title"));
              var htmlOutput = this.template(this.model.toJSON());
              this.$el.html(htmlOutput);
              return this;
          }
      })
  &lt;/script&gt;
  &lt;!-- add movie view --&gt;
  &lt;script type="text/javascript"&gt;
      var AddMovieView = Backbone.View.extend({
          initialize: function() {
              // model reder
              this.render();
          },
          render: function() {
              var template =  _.template($("#template-addmovie").html());
              this.$el.html ( template );
          },
          events: {
              "click input[type=button]": "addNewMovie"
          },
          addNewMovie: function (event) {
              var movieModel = new Movie({ title: $("#input-addmovie").val(), mpaaRating: "R" });
              var movieView = new MovieView({ model: movieModel });   
          }
      })
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      var addMovie = new AddMovieView( {el: $("#container-addmovie")} )
  &lt;/script&gt;
  </code></pre>
  
  <p>The problem is when I'm initiating <code>addNewMovie</code> event...</p>
  
  <pre><code>var movieModel = new Movie({ title: $("#input-addmovie").val(), mpaaRating: "R" });
  var movieView = new MovieView({ model: movieModel });   
  </code></pre>
  
  <p>...I'm not creating a new model, but overwriting exiting. So, no new li in ul is created, but the exiting changes. <strong>The question is: how to create a new model every time I initiate addNewMovie event and render it's view (push new li to it's container)?</strong>  I guess, I need some kind of collections.</p>
  
  <p><strong>UPDATED (added collection)</strong>:</p>
  
  <pre><code>&lt;div id="container-addmovie"&gt;&lt;/div&gt;
  &lt;p&gt;Movies:&lt;/p&gt;
  &lt;ul id="container-movie"&gt;&lt;/ul&gt;
  
  &lt;!-- templates  --&gt;
  &lt;!-- Movie template --&gt;
  &lt;script type="text/template" id="template-movie"&gt;
      &lt;li&gt;&lt;strong&gt;Title: &lt;/strong&gt;&lt;%=title%&gt;; &lt;strong&gt;Rating: &lt;/strong&gt;&lt;%=mpaaRating%&gt;&lt;/li&gt;
  &lt;/script&gt; 
  &lt;!-- add movie template --&gt;
  &lt;script type="text/template" id="template-addmovie"&gt;
      &lt;input type="text" name="" id="input-addmovie"&gt;
      &lt;input type="button" name="" id="button-addmovie" value="Add new movie"&gt;
  &lt;/script&gt; 
  
  &lt;!-- models --&gt;
  &lt;!-- movie model --&gt;
  &lt;script type="text/javascript"&gt;
      var Movie = Backbone.Model.extend({});
  &lt;/script&gt;
  
  &lt;!-- collections --&gt;
  &lt;script type="text/javascript"&gt;
      var MovieCollection = Backbone.Collection.extend({
          model: Movie,
          addMovie: function(element) {
               return this.add(element);
          }
      });
  &lt;/script&gt;
  
  &lt;!-- views --&gt;
  &lt;!-- movie view --&gt;
  &lt;script type="text/javascript"&gt;
      var MovieView = Backbone.View.extend({
          el: "#container-movie",
          template: _.template($("#template-movie").html()),
          initialize: function() {
              // model reder
              this.render();
              // change event
              this.listenTo(this.model, "change", this.render);
          },
          render: function() {
              console.log("MovieView render; Movie Title: " + this.model.get("title"));
              var htmlOutput = this.template(this.model.toJSON());
              this.$el.html(htmlOutput);
              return this;
          }
      })
  &lt;/script&gt;
  &lt;!-- add movie view --&gt;
  &lt;script type="text/javascript"&gt;
      var AddMovieView = Backbone.View.extend({
          initialize: function() {
              // model reder
              this.render();
              this.collection = new MovieCollection();
          },
          render: function() {
              var template =  _.template($("#template-addmovie").html());
              this.$el.html ( template );
          },
          events: {
              "click input[type=button]": "addNewMovie"
          },
          addNewMovie: function (event) {
              var elementMovie = { title: $("#input-addmovie").val(),mpaaRating:"R"};
              this.movieModel = new Movie(elementMovie);
              console.log (elementMovie);
              this.collection.addMovie(this.movieModel);
          }
      })
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      var addMovie = new AddMovieView( {el: $("#container-addmovie")} )        
  &lt;/script&gt;
  </code></pre>
  
  <p>and I still get <code>TypeError: 'undefined' is not an object (evaluating 'this.collection.addMovie')</code></p>
  
  <p>Thanks, and sorry for noob question.</p>