在 View.event Backbone.js 中创建一个新模型

Posted 2023-02-26

【中文标题】在 View.event Backbone.js 中创建一个新模型

【英文标题】：Create a new model in View.event Backbone.js

【发布时间】：2013-11-10 21:49:06

【问题描述】：

假设我正在构建一个简单的应用程序，它允许我添加电影并将它们显示在列表中。这是我的代码（正文）：

<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 事件并渲染它的视图时创建一个新模型（将新的 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')

谢谢，对于菜鸟问题​​，我们深表歉意。

【参考方案1】：

是的，您需要集合元素。 你可以这样做：

这是收藏：

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

更新

你不必创建一个新视图，尝试在 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);
        
    )

【讨论】：

您能否更具体一点：我应该在哪里使用this.collection = new MovieCollection(); 创建新集合？在MovieView 中初始化还是在AddMovieView？现在我得到ypeError: 'undefined' is not an object (evaluating 'this.collection.addElement')。感谢您的回复

顺便说一句，我想你的意思是第二行是elementMovie，第三行是addMovie ，是吗？无论如何，我仍然收到错误TypeError: 'undefined' is not an object (evaluating 'this.collection.addMovie')。我们可以在每个新视图实例初始化时创建一个新集合吗？