title: calling a view from another view in Backbone
body: <p>I have menu item that when clicked should open a chat panel that is part of a different view. Today is my first day looking at Backbone and im a little confused about how I can call a function on another view when the element is clicked. </p>
  
  <p>I want something like the following on the menu view:</p>
  
  <pre><code>view.$('.wkVideoCall')
      .on('click', function() {
          wk.ui.videoChat.videoChatView.open();
          wk.ui.videoChat.openForChatUser();
      });
  </code></pre>
  
  <p>Where <code>wk.ui.videoChat.videoChatView</code> is the view that has <code>.open()</code> as a method.</p>
  
  <p>But the above is not working, is there an event like change but for click that i can be using? or some sort of bind function?</p>
  
  <p>I know have something like this:
  <strong>View 1 (menu):</strong></p>
  
  <pre><code>events: {
          'click .wkVideoCall': 'openVideoChat'
      },
      openVideoChat: function() {
          var videoChatView = new wk.ui.videoChat.videoChatView();
          videoChatView.render();
  
      },
  </code></pre>
  
  <p><strong>View 2 (chat panel):</strong></p>
  
  <pre><code>(function() {
  
      var self = wk.ui.videoChat;
  
      self.VideoChatView = Backbone.View.extend({
  
          el: function() {
              [0];
              return wk.core.template.load('videoChatTmpl')[0];
          },
  
          initialize: function() {
  
              var view = this,
                  model = view.model,
                  $el = view.$el;
  
  
              .on('myEvent', this.open);
  
              view.$('.wkUnmuteVideo')
                  .on('click', function() {
                      self.muteMyVideo(false);
                  });
  
              view.$('.wkUnmuteAudio')
                  .on('click', function() {
                      self.muteMyAudio(false);
                  });
  
              view.$('.wkOptions')
                  .on('focus', function() {
                      self.showOptions();
                  })
                  .on('blur', function() {
                      self.hideOptions();
                  });
          },
  
          render: function() {
              console.log("inside");
          }
  
      });
  
  })();
  </code></pre>
  
  <p>But nothing is logged</p>