Contact Manager View

view.js

var BaseView = Backbone.View.extend({
  close: function(){
    this.unbind();
    if (this.onClose){
      this.onClose();
    }
  }
});

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

var RightContainerView = BaseView.extend({
  leftContainerView: null,
  template: _.template($('#right-container-template').html()),
  render: function() {
    this.$el.html(this.template({}));
  },
  renderAddContactForm: function(){
    new AddContactFormView({
      el: this.$el.find('.content')
    }).render();
  }
});

var rightContainerView = new RightContainerView({
  el: $('#right-container')
});

var LeftContainerView = BaseView.extend({
  rightContainerView: null,
  events: {
    "click .js-add-contact": "addContact",
    "click .js-single-contact": "viewContact",
    "click .js-more-contact": "moreContact"
  },

  onClose: function() {
    Dispatch.unbind('addContact');
  },

  addContact: function(e){
    //this.trigger('addContact');
    //Dispatch.trigger('addContact');
    this.rightContainerView.renderAddContactForm();
  },

  viewContact: function(e){
    // render contact detail view
  },

  moreContact: function(e){
    // load more contacts
  },

  template: _.template($('#left-container-template').html()),

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

var leftContainerView = new LeftContainerView({
  el: $('#left-container')
});

leftContainerView.render();

leftContainerView.rightContainerView = rightContainerView;
rightContainerView.leftContainerView = leftContainerView;

Dispatch.on('addContact', function(){
  rightContainerView.renderAddContactForm();
});

/*
leftContainerView.on('addContact', function(){
  rightContainerView.renderAddContactForm();
});
*/