[英]backbone change event not firing
In my web application, I have a model that is mixture of normal standard attributes (strings, booleans, etc) and the collections. 在我的Web应用程序中,我有一个包含普通标准属性(字符串,布尔值等)和集合的模型。 In the application a user can create a group and add a projects to that group.
用户可以在应用程序中创建一个组并将项目添加到该组。 The group is collection with the model.
该组是模型的集合。 I can add and remove projects to the group absolutely fine, in so much that i can see the projects being added or removed in my logging, and also in the database.
我可以在组中很好地添加和删除项目,以至于我可以在日志记录以及数据库中看到正在添加或删除的项目。
To add projects to a group I open a modal and clicking a button in that model triggers model.save() and this triggers a change event. 要将项目添加到组中,我打开一个模式,然后单击该模型中的按钮将触发model.save(),这将触发更改事件。 However if I add user and then remove without reloading the page, the change is not fired, why would this be?
但是,如果我添加用户然后删除而不重新加载页面,则不会触发更改,这是为什么呢? Here is the modal view,
这是模态视图,
Modal View 模态视图
Views.OrganisastionEditView = Backbone.View.extend({
className : 'modal-body',
template: _.template( $('#tpl-edit-organisation').html() ),
events: {
"click .js-add-member" : "addMember",
"click .js-add-client" : "addClient",
"click .js-add-project" : "addProject",
"click .js-add-team" : "addTeam",
"click .search-results a" : "selectSearchResult",
"click .js-remove-pill" : "removeAttribute",
"submit .edit-organisation" : "saveOrganisation",
"click .js-remove-delete" : "deleteOrganisation",
"click .js-make-admin" : "changeAdmin"
},
initialize: function() {
//this.listenTo(this.model, 'change', this.snyc);
this.listenTo(this.model.get('members'), 'change', this.changeMember);
this.render();
},
render: function() {
var self = this;
// this.model.initialize();
$('#myModal').on('hidden.bs.modal', function () {
self.remove();
Pops.Routes.Application.navigate('/groups', { trigger: false } );
});
this.$el.html( this.template({
organisation: this.model.toJSON()
})).insertAfter('.modal-header');
var organisationProjectsView = new Views.GroupsProjectsViews({
collection: this.model.get('projects')
});
var organisationClientsView = new Pops.Views.GroupsClientsViews({
collection: this.model.get('clients')
});
var organisationMembersView = new Views.GroupsMembersAdminViews({
collection: this.model.get('members')
});
var organisationTeamsView = new Views.GroupsTeamsViews({
collection: this.model.get('teams')
});
$("#myModal").modal();
},
deleteOrganisation: function(e) {
e.preventDefault();
this.model.destroy();
$("#myModal").modal('hide');
this.remove();
},
removeAttribute: function(e) {
e.preventDefault();
var element = $(e.currentTarget);
switch(element.data('type')) {
case "project":
console.log(this.model.get('projects'));
this.model.get('projects').remove(element.data('id'));
element.parents('.avatar-pill').remove();
break;
case "client":
this.model.get('clients').remove(element.data('id'));
element.parents('.avatar-pill').remove();
break;
}
},
addMember: function(e) {
e.preventDefault();
var element = $(e.currentTarget);
this.$('.search').parent().children().show();
this.$('.search').first().remove();
//element.parent().children().hide();
var search = new Views.SearchView({
collection: new Collections.Users,
type : "users",
merge: false
});
element.parent().append(search.render().el);
},
addProject: function(e) {
e.preventDefault();
var element = $(e.currentTarget);
this.$('.search').parent().children().show();
this.$('.search').first().remove();
//element.parent().children().hide();
var search = new Views.SearchView({
collection: new Collections.Projects,
type : "projects",
merge: false
});
element.parent().append(search.render().el);
},
selectSearchResult: function(e) {
e.preventDefault();
var element = $(e.currentTarget),
self = this;
switch( element.data('type')) {
case "project":
var project = new Models.Project({ id: element.data('id')});
project.fetch({
success: function() {
self.model.get('projects').add(project);
console.log(self.model.get('projects'));
var model = self.model;
self.$('.search').hide();
self.$('button').show();
var projectsDetails = new Views.ProjectNamePillView({
model : project
});
self.$('.search').parent().append( projectsDetails.render().el );
self.$('.search').remove();
}
});
break;
}
},
saveOrganisation: function(e) {
e.preventDefault();
var element = $(e.currentTarget);
var data = element.serializeJSON();
this.model.set(data);
this.model.save();
},
});
Single Model View 单一模型视图
Views.OrganisationView = Backbone.View.extend({
tagName: 'div',
className:'group group--panel col-sm-3',
template : _.template( $('#tpl-single-group').html() ),
events: {
"click a[data-type=organisation], button[data-type=organisation]" : "edit",
"click .js-delete-group" : "removeOrganisation",
},
initialize: function() {
this.listenTo(this.model, 'change', this.render);
//this.listenTo(this.model, 'change', this.render);
this.listenTo(this.model, 'destroy', this.removeView);
},
render: function() {
console.log('getting fired');
this.$el.html( this.template({
group: this.model.toJSON()
}));
return this;
},
removeView: function() {
this.remove();
},
removeOrganisation: function(e) {
this.model.destory();
this.remove();
},
edit: function(e) {
e.preventDefault();
Routes.Application.navigate('/organisation/edit/' + this.model.get('id'), { trigger: false } );
var editClient = new Views.OrganisastionEditView({
model: this.model
});
}
});
Change events are triggered on the model itself not its attributes. 更改事件是在模型本身而不是其属性上触发的。 You can however listen to a particular attribute change by using the
change:[attribute]
event naming format. 但是,您可以使用
change:[attribute]
事件命名格式来监听特定的属性更改。
In your example you would change: 在您的示例中,您将更改:
this.listenTo(this.model.get('members'), 'change', this.changeMember);
To look like: 看起来像:
this.listenTo(this.model, 'change:members', this.changeMember);
Check the Backbonejs event docs . 检查Backbonejs事件文档 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.