骨幹更改事件未觸發

Question

在我的Web應用程序中，我有一個混合了正常標準屬性（字符串，布爾值等）和集合的模型。在應用程序中，用戶可以創建一個組並將項目添加到該組。該組是與模型一起收集的。我可以將項目添加到項目組中並將其完全刪除，以至於我可以在日誌中以及數據庫中看到添加或刪除的項目。

要將項目添加到組中，我打開一個模型並單擊該模型中的按鈕觸發model.save（），這會觸發更改事件。但是，如果我添加用戶，然後刪除而不重新加載頁面，更改不會被解僱，爲什麼會這樣？下面是模式的看法，

模式的看法

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

    }, 

}); 

單模型視圖

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

}); 

Answer 1

更改事件被觸發對模型本身而不是它的屬性。但是，您可以使用change:[attribute]事件命名格式來監聽特定的屬性更改。

在你的榜樣，你會改變：

this.listenTo(this.model.get('members'), 'change', this.changeMember); 

的樣子：

this.listenTo(this.model, 'change:members', this.changeMember); 

檢查Backbonejs event docs。