在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 });   

...我不是要創建新模型，而是要覆蓋現有的模型。 因此，不會在ul中創建新的li，但是現有的更改。 問題是：如何在每次啟動addNewMovie事件並呈現其視圖時創建一個新模型（將新名稱推入其容器）？ 我想，我需要某種收藏。

UPDATED（添加的集合） ：

<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

是的，您需要collection元素。 您可以執行以下操作：

這是集合：

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

例如，在您的視圖內部，可以執行以下操作：

this.collection = new MovieCollection();

並添加新的電影模型，請嘗試以下操作：

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

UPDATE

您不必創建新視圖，嘗試將事件和方法添加到Movie的視圖中，如下所示：

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);
        }
    })