Создайте новую модель в View.event Backbone.js

Question

Предположим, я создаю простое приложение, которое позволяет мне добавлять фильмы и отображать их в списке. Вот мой код (тело):

<div id="container-addmovie"></div> 
<p>Movies:</p> 
<ul id="container-movie"></ul> 

<!-- templates --> 
<!-- Movie template --> 
<script type="text/template" id="template-movie"> 
    <li><strong>Title: </strong><%=title%>; <strong>Rating: </strong><%=mpaaRating%></li> 
</script> 
<!-- add movie template --> 
<script type="text/template" id="template-addmovie"> 
    <input type="text" name="" id="input-addmovie"> 
    <input type="button" name="" id="button-addmovie" value="Add new movie"> 
</script> 

<!-- models --> 
<!-- movie model --> 
<script type="text/javascript"> 
    var Movie = Backbone.Model.extend({}); 
</script> 

<!-- views --> 
<!-- movie view --> 
<script type="text/javascript"> 
    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; 
     } 
    }) 
</script> 
<!-- add movie view --> 
<script type="text/javascript"> 
    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 }); 
     } 
    }) 
</script> 

<script type="text/javascript"> 
    var addMovie = new AddMovieView({el: $("#container-addmovie")}) 
</script> 

Проблема заключается в том, когда я начала addNewMovie событие ...

var movieModel = new Movie({ title: $("#input-addmovie").val(), mpaaRating: "R" }); 
var movieView = new MovieView({ model: movieModel }); 

... Я не создавая новую модель, но перезапись выхода. Таким образом, никаких новых li в ul не создается, а выходящих изменений. Вопрос заключается в следующем: как создать новую модель каждый раз, когда я инициирую событие addNewMovie и визуализирую его (вставьте новый li в его контейнер)? Думаю, мне нужны какие-то коллекции.

ОБНОВЛЕНО (добавлена ​​коллекция):

<div id="container-addmovie"></div> 
<p>Movies:</p> 
<ul id="container-movie"></ul> 

<!-- templates --> 
<!-- Movie template --> 
<script type="text/template" id="template-movie"> 
    <li><strong>Title: </strong><%=title%>; <strong>Rating: </strong><%=mpaaRating%></li> 
</script> 
<!-- add movie template --> 
<script type="text/template" id="template-addmovie"> 
    <input type="text" name="" id="input-addmovie"> 
    <input type="button" name="" id="button-addmovie" value="Add new movie"> 
</script> 

<!-- models --> 
<!-- movie model --> 
<script type="text/javascript"> 
    var Movie = Backbone.Model.extend({}); 
</script> 

<!-- collections --> 
<script type="text/javascript"> 
    var MovieCollection = Backbone.Collection.extend({ 
     model: Movie, 
     addMovie: function(element) { 
      return this.add(element); 
     } 
    }); 
</script> 

<!-- views --> 
<!-- movie view --> 
<script type="text/javascript"> 
    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; 
     } 
    }) 
</script> 
<!-- add movie view --> 
<script type="text/javascript"> 
    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); 
     } 
    }) 
</script> 

<script type="text/javascript"> 
    var addMovie = new AddMovieView({el: $("#container-addmovie")})   
</script> 

и я все еще получаю TypeError: 'undefined' is not an object (evaluating 'this.collection.addMovie')

Спасибо, и извините за нуб вопрос.

Answer 1

Да, вам нужен элемент коллекции. Вы можете сделать что-то вроде этого:

это коллекция:

var MovieCollection = Backbone.Collection.extend({ 
     model: Movie, 
     addMovie: function(elements, options) { 
      return this.add(elements, options); 
     } 
    }); 

внутри вашей точки зрения, например, в Initialize вы можете сделать это:

this.collection = new MovieCollection(); 

и добавить новую модель Movie попробуйте это:

var elementMovie = { title: $("#input-addmovie").val(),mpaaRating:"R"}; 
this.movieModel = new Movie(element); 
this.collection.addElement(this.movieModel); 

UPDATE

Вы «не должны создать новый вид, попробуйте вставить событие и добавляемые метод в связи с кино, что-то вроде этого:

var MovieView = Backbone.View.extend({ 
     el: "#container-movie", 
     template: _.template($("#template-movie").html()), 
     initialize: function() { 
      // model reder 
      this.collection = new MovieCollection(); 
      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; 
     }, 
     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); 
     } 
    })