событие изменения магистрали не запускается

В моем веб-приложении у меня есть модель, которая представляет собой смесь обычных стандартных атрибутов (строки, логические значения и т. Д.) И коллекций. В приложении пользователь может создать группу и добавить в нее проекты. Группа коллекционная с макетом. Я могу добавлять и удалять проекты в группу абсолютно нормально, настолько, что я могу видеть добавляемые или удаляемые проекты в моем журнале, а также в базе данных.

Чтобы добавить проекты в группу, я открываю модальное окно и щелкаю кнопку в этой модели, запускается 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
        });
    }

});

person Udders    schedule 20.11.2014    source источник
comment
Опечатка в removeOrganisation: this.model.destory ();   -  person html_programmer    schedule 20.11.2014


Ответы (1)


События изменения инициируются самой моделью, а не ее атрибутами. Однако вы можете прослушивать изменение конкретного атрибута, используя формат именования событий change:[attribute].

В вашем примере вы бы изменили:

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

Выглядеть:

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

Проверьте документы о событиях Backbonejs.

person Kyle Needham    schedule 20.11.2014