Backbone two different view for same model

Question

I am new to backbone and I have created a view as

var ContactListItemView = Backbone.View.extend({

    template: _.template($(cont_lst_item_view_tmpl).html()),

    initialize: function () {
        this.model.bind("change", this.render, this);
        this.model.bind("destroy", this.close, this);
    },

    render:function (eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    },

    events: {
        "click .contact-detail": "contact_detail",
    },

    contact_detail: function(){
        if (contact_detail != null){
            contact_detail.model = this.model;
        }else{
            contact_detail = new ContactDetailView({model: this.model, el: $(data_detail_body_template)});
        }

        group_id = this.model.get('group_id');
        var group_list = '';

        if (group_id){
            _.each(group_id.split(','), function(id){
                group_name = group_collection.get(id).get('name');
                group_list += group_name + ',';
            });

            group_list = group_list.slice(0, -1);
            this.model.set({'group': group_list});
        }

        $(data_detail_title_template).html(contact_detail_title_name);
        contact_detail.render();
        return false;
    },

    close: function () {
        $(this.el).unbind();
        $(this.el).remove();
    },
});



var ContactDetailView = Backbone.View.extend({
    className: 'contact-actions',
    template: _.template($(contact_detail_view_template).html()),

    initialize: function(){
        eventContact.bind('change', this.render, this);
        eventContact.bind('destroy', this.close, this);
    },

    render: function(){
        $(".contact-actions").remove();
        $(this.el).html(this.template(this.model.toJSON()));
        if (group_change == null){
            group_change = new GroupForContactsView({model: this.model, 'collection': group_collection, el: $(this.el)});
        }else{
            group_change.model = this.model;
            group_change.dv_render = this.render;
            group_change.collection = group_collection;
        }
        $(this.el).append(group_change.render().el);
        $(date_picker).datepicker({autoclose: true, format: 'yyyy-mm-dd', endDate: '+0d'});
        return this;
    },

    events: {
        "click .remove-contact": "remove_contact",
        "click .update-contact": "update_contact",
    },

    remove_contact: function(){
        this.model.destroy();
        eventContact.trigger('destroy');
        close_modal(contact_delete_modal_form);
        return false;
    },

    update_contact: function(event){
        var name = $(update_contact_name_id).val();
        var email = $(update_contact_email_id).val();
        var phone = $(update_contact_phone_id).val();
        var dob = $(update_contact_dob_id).val();
        var company = $(update_contact_company_id).val();
        var address = $(update_contact_address_id).val();
        var website = $(update_contact_website_id).val();
        var notes = $(update_contact_notes_id).val();

        if (name == ''){
            var message = 'Name is not allowed to be empty.'
            var error = new ErrorView({el: $('.error-message'), 'message': message});
            return false;
        }else if (!validateMobile(phone)){
            var message = 'Enter a valid mobile number.'
            var error = new ErrorView({el: $('.error-message'), 'message': message});
            return false;
        }else if (!validateEmail(email)){
            var message = 'Enter a valid email address.'
            var error = new ErrorView({el: $('.error-message'), 'message': message});
            return false;
        }else if (!validateDate(dob)){
            var message = 'Enter a valid date of birth in yyyy-mm-dd format.'
            var error = new ErrorView({el: $('.error-message'), 'message': message});
            return false;
        }else{
            this.model.set({
                'name': name,
                'email': email,
                'phone': phone,
                'dob': dob,
                'company': company,
                'address': address,
                'website': website,
                'notes': notes});
            this.model.update();
            eventContact.trigger('change');
            close_modal(contact_update_modal_form);
            return false;
        }
    },

    close: function () {
        $(this.el).html(this.template());
    },
});

Here model of ContactListItemView is passed to ContactDetailview for its model, But when changed carried out by the event of ContactDetailView, the model on ContactListItemView is not triggered. And to solve it, I made a new global event as

var eventContact = _.extend({}, Backbone.Events);

and I trigger to this event and now working fine.

But I am not satisfied with this technique because if there are too many views and models this global concept will be very difficult to track. Is there any other best way to do this ?

Answer 1

When you are assigning:

group_change.model = this.model;

its after the initialize function was executed, and the event listeners are already set on the previous model.

You need to make sure you attach event listeners to the new model assigned to the view, or basically always destroy the previous view and create a new view with the new model, so you don't have to maintain a state.