Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
156
rated 0 times [  162] [ 6]  / answers: 1 / hits: 25867  / 11 Years ago, fri, june 7, 2013, 12:00:00

I am trying to update my view whenever I add a new model to my collection. My first question is do I automatically add a model to my collection when I save that model, like:



PostsApp.Views.Form = Backbone.View.extend({
template: _.template($('#form-template').html()),
render: function(){
this.$el.html(this.template(this.model.toJSON()));
},
events:{
'click button' : 'save'
},

save: function(e){
console.log(is this working);
e.preventDefault();
var newname = this.$('input[name=name-input]').val();
var newadress = this.$('input[name=adress-input]').val();
this.model.save({name: newname, adress : newadress});
}


});


or do I still have to do collection.add()



Other than that to see the new model in my view I am trying to add an 'add' event listener like this:



PostsApp.Views.Posts = Backbone.View.extend({
initialize: function(){
this.collection.on('add', this.addOne, this);

},
render: function(){
this.collection.forEach(this.addOne, this);
},

addOne: function(post){
var postView = new PostsApp.Views.Post({model:post});
postView.render();
this.$el.append(postView.el);
}
});


This not only doesnt work, but when I add the initialize method, it just duplicates everything in my model when the page is first loaded.


More From » jquery

 Answers
5

Nope.. When you do a model.save , it will just create a zombie model ( If it not already a part of the collection .i.e If a New model is saved) which is not a part of any collection.



So your add event will not be triggered for the collection.



If you want the add event to be triggered , Use the create method of collection , which then will know on which collection the new model has to be added..



collection.create({model});


Then it would internally add the model to the collection and fire the add event



Also it is a better idea to use listenTo instead of attaching events using on



this.listenTo(this.collection, 'add', this.addOne);


Code



PostsApp.Views.Form = Backbone.View.extend({
template: _.template($('#form-template').html()),
render: function () {
this.$el.html(this.template(this.model.toJSON()));
},
events: {
'click button': 'save'
},

save: function (e) {
console.log(is this working);
e.preventDefault();
var newname = this.$('input[name=name-input]').val();
var newadress = this.$('input[name=adress-input]').val();
this.collection.create({
name: newname,
adress: newadress
});
}
});

PostsApp.Views.Posts = Backbone.View.extend({
initialize: function () {
this.listenTo(this.collection, 'add', this.addOne);

},
render: function () {
this.collection.forEach(this.addOne, this);
},

addOne: function (post) {
var postView = new PostsApp.Views.Post({
model: post,
collection : this.collection
});
postView.render();
this.$el.append(postView.el);
}
});

[#77747] Thursday, June 6, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
jameson

Total Points: 534
Total Questions: 103
Total Answers: 102

Location: Lithuania
Member since Fri, Sep 4, 2020
4 Years ago
jameson questions
;