I'm trying to do something very similar.  I've got two controllers, one for a div/tree and another for a div/list.  I'd like to raise events from the tree controller that are handled by the list controller.  I know I can wire them up if I bind/trigger the events based directly on the DOM elements, but I'd much rather bind/trigger the events on the controller objects themselves.

Does anyone know if this is possible?  Am I thinking about the problem wrong?

Thanks,
  Chris

leionidus,

Lets say I have a controller named "Box" and a controller named "Subbox".

I'm gonna take a stab at this and Justin will correct me, but...

Trigger an event in Subbox when "abcdef" is called and have your Box controller bind to that event.

In Subbox:

1. "abcdef": function() {
         // Do something
         // this.element.trigger("abcdefEvent");
   }

In Box:

1. ".subbox abcdefEvent": function(el, ev) {
         // Do something
   }

Thanks,
Mike

Hi, 

He is the wizard at this stuff.

Does the Box controller create the Subbox controller?

what are subbox and box in reality? 

What do they do?

box is a lightbox where you can put in some content, the lightbox is controlled by a lightbox controller, e.g. to destroy the lightbox with something like a close button.

login controller should trigger some sort of "close" message whenever it is done doing what needs to be done.

the lightbox should listen to these close messages and close itself. 


in login controller ....

"form submit" : function(el, ev){
  ev.preventDefault();
  new ActiveUser(el.formParams()).save(this.callback('loggedIn'),this.callback('error'))
},
'loggedIn' : function(user){
  this.trigger('close')
}


lightbox ....

$.Controller('Lightbox',{
  listensTo : ['close']
},{
  close : function(){
    this.element.hide()
  },
  ".closeButton click" : function(){
    this.close();
 }
})

When is the right time and what is the difference between doing what you suggest and what I suggested earlier in this post.

When he said he wanted something to happen in subbox that would cause box to react and do something, I suggested:

In subbox do:

1. "abcdef": function() {
         // Do something
         // this.element.trigger("abcdefEvent");
   }

And in box do:

1. ".subbox abcdefEvent": function(el, ev) {
         // Do something
   }

What is the difference and when should we be using the listensTo attribute as opposed to my example?

Thanks,
Mike

tried justins approach, but I'm getting "TypeError: Result of expression 'this.trigger' [undefined] is not a function.".

sorry, this.element.trigger( ... )

thanks, just fixed it when you posted the solution :)

yes, this is one of JMVC's best features.  Controller get auto-destroyed when their element is removed.  It's great b/c you don't have to worry about removing event handlers if you do something like:

awesome :)

Ok, that makes sense, but when would be an appropriate time to something like this where there is a coupling between the controllers?

1. ".login close": function() { ... }

One short question as another addition: