Backbone 同一模型的两个不同视图

Question

我是 backbone 的新手，我创建了一个视图

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

此处ContactListItemView的模型传递给ContactDetailview为其模型，但是当ContactDetailView的事件进行更改时，ContactListItemView上的模型不会被触发。为了解决这个问题，我创建了一个新的全局事件

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

我触发了这个事件，现在工作正常。

但我对这种技术并不满意，因为如果视图和模型太多，这个全局概念将很难跟踪。还有其他最好的方法吗？

Answer 1

分配时：

group_change.model = this.model;

在执行初始化函数之后，事件侦听器已经在之前的模型上设置。

您需要确保将事件侦听器附加到分配给视图的新模型，或者基本上总是销毁以前的视图并使用新模型创建新视图，这样您就不必维护状态.

Backbone 同一模型的两个不同视图

Backbone two different view for same model

javascript

model

view

backbone.js