在 View.event Backbone.js 中创建新模型
Create a new model in View.event Backbone.js
假设我正在构建一个简单的应用程序,它允许我添加电影并将它们显示在列表中。这是我的代码(正文):
<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事件并呈现其视图(将new 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')
谢谢,很抱歉菜鸟问题。
是的,您需要集合元素。你可以做这样的事情:
这是集合:
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);
}
})
相关文章:
- 显示模块模式在Knockout中设置模型的新实例
- Sequelize associations:set[Models]添加新模型,而不是关联现有模型
- 如何观察在 Sails .js 中添加到模型中的新记录
- 如果模型开始为空,如何处理ngRepeat模型中的新项
- 在获取后将新模型准备到集合中(不带比较器)
- 主干中的比较器在添加新模型时需要排序调用
- 如何在创建保存新模型时获取id
- 调用ko.applyBindings后,向Knockout视图模型添加新属性
- Emberjs操作模型不会初始化新模型
- 在knocket js中应用绑定后,向视图模型添加新属性
- Thinky.io 有很多没有保存新的模型实例
- 使用主干上的新数据更改模型的数据
- 在 View.event Backbone.js 中创建新模型
- 猫鼬数据不会保存模型的新实例
- 挖空选择框未绑定到初始模型值,而是绑定新值
- 主干.js:仅添加来自 JSON 集合获取的新模型
- 在backbone.js中,如何使用新的模型数据更新视图,同时在没有完整渲染的情况下保持排序顺序
- 在保存新的模型实例之后,在Ember.js中转换到路由之前,更新资源模型
- 如何使用Backbone在特定嵌套的对象数组中设置新的模型信息
- 用AngularJS的方式给MongoLab添加一个新的模型字段