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。

骨干变化事件没有解雇

1 个答案: