where is your controller?

Sorry, I am not sure I understand the question (I just started with this awesome framework, thanks, btw).  I setup a new app named "webplayer" and created two "plugins" inside it called, "mediaplayer" and "loader".  So I have this structure:

\webplayer\

• controllers\
• docs\
• fixtures\
• loader\
  • docs\
  • fixtures\
  • resources\
  • scripts\
  • test\
  • views\
  • funcunit.html
  • loader.html
  • loader.js 
  • qunit.html

• mediaplayer\
  • docs\
  • fixtures\
  • resources\
  • scripts\
  • test\
  • views\
  • funcunit.html
  • mediaplayer.html
  • mediaplayer.js -- this is where I use $.Controller.extend("WebPlayer.Mediaplayer")... to add the "load" function which calls a    "this.element.trigger("loaded")"
  • qunit.html
• models\
• resources\
• scripts\
• test\
• views\
• funcunit.html
• webplayer.html
• webplayer.js -- (this is where I am trying to do the event binding above...I do this in the "then()" function )
• qunit.html

Do you want to achieve communication between Controller in loader.js and Controller in mediaplayer.js ?

I create them like this (in webplayer.js):

$("#loader").webplayer_loader(options);

 $("#mediaplayer").webplayer_mediaplayer(options);


I want to display the "loader" (just some text and a spinner image) and then when the "mediaplayer" fires the"loaded" event, I want to hide the "loader" element.  I want to bind the events somewhere outside of the plugins themselves because I want them to be reusable in other projects and not dependent on one another.  I would think I need to add the event handling somewhere in my "webplayer" application.  What is the best way to achieve this?  Thanks

Thanks for the response.  If I instantiate both of the plugins on a single "#container" element or the "body" element, then these controls don't get placed into the document properly.  I want the "loader" plugin created inside the "#loader" div, and the "mediaplayer" created inside the "#mediaplayer" div.  Can I keep that part the same and still somehow handle the events using the "body" element?

How are you adding the controls? Are you doing some thing like

Thanks, that worked for me.  Is there a way to make sure I am only listening to the "loaded" event coming from a specific element?  For example, I can do:

$("body").bind("loaded", function(ev){    
     alert("Mediaplayer LOADED");    
});

which works, but it will handle all events called "loaded" coming from any element (so if multiple plugins have a "loaded" event, this gets fired multiple times).  I want event handlers to look for events only on specific elements. I see the bind signature takes an optional parameter that looks like this:

el {optional:HTMLElement|jQuery.fn} defaults to this.element

I can't seem to make it work to only handle "loaded" coming from my "#mediaplayer" element.  I tried this but it didn't work:

$("body").bind($("#mediaplayer), "loaded", function(ev){    
     alert("Mediaplayer LOADED");    
});

Ok, am starting to get this working.

I created a "presentation_controller" which does the following:

1. Load the JSON data "presentation" data to configure the player
2. Bind the handlers for the "loaded" events fired from the components
3. Create the sub-controls (loader graphic, mediaplayer, etc.)

In the "init" function of the "presentation_controller" I bind the events,  load the JSON data

1.    init: function() {
    
         this.bind($("#loader"), "loaded", "loadedLoader"); // Bind to the "loaded" events for loader
         this.bind($("#mediaplayer"), "loaded", "loadedMediaPlayer");  // Bind to the "loaded" events for mediaplayer
         Webplayer.Models.Presentation.findAll({}, this.callback('data_loaded'));  // get the presentation JSON
   
       },                   
   

I then want to create the other plugin controls (loader, mediaplayer) based on information in the returned JSON model.  The problem is, if I try to call the function that creates the loader and mediaplayer plugins in the "data_loaded" callback function that occurs after the JSON is loaded, none of the events are captured.  However, if I change the order of things so the function that creates these controls is called in the "init" function, the event handlers do properly capture the events.  Of course, this won't work because I don't have the correct data to set them up, yet.  How can I make sure the event handlers work even after the "data_loaded" handler is called?

This is what I am trying that causes no events to be captured:

1. // in "presentation_controller.js"
2. /* @Prototype */
   {
3.       {
4.       /**
5.     * Initialize a new Presentation controller.
6.     */
7.     init: function() {       
   
8.        this.bind_events();
9.        Webplayer.Models.Presentation.findAll({}, this.callback('data_loaded'));
10.     },
11.   
    
12.     /*
13.       * Handle events from components
    
14.     */
    
15.     bind_events: function() {           
    
16.         this.bind($("#mediaplayer"), "loaded", "loadedMediaPlayer");
    
17.     },
18.       
    
19.      /**
20.     * Handle the data loaded event
21.     */
22.     data_loaded: function(presentations) { 
    
23.         this.isDataLoaded = true;
24.         this.presData = presentations[0];
25.         this.create_controls();  // Call the function to create the mediaplayer and other controls 
    
26.     }
27.    
    
28.     /* ... etc. */
    
29. }

This captures events properly, but I don't have the JSON data yet:

1. // in "presentation_controller.js"
2. /* @Prototype */
3. {
4.       {
5.       /**
6.     * Initialize a new Presentation controller.
7.     */
8.     init: function() {       
   
9.        this.bind_events();
10.        Webplayer.Models.Presentation.findAll({}, this.callback('data_loaded'));
11.        this.create_controls();  // Call the function to create the mediaplayer and other controls
12.     },
13.   
    
14.     /*
15.       * Handle events from components
    
16.     */
    
17.     bind_events: function() {      
    
18.         this.bind($("#mediaplayer"), "loaded", "loadedMediaPlayer");
19.    
    
20.     },
21.       
    
22.      /**
23.     * Handle the data loaded event
24.     */
25.     data_loaded: function(presentations) { 
    
26.         this.isDataLoaded = true;
27.         this.presData = presentations[0];
28.        
    
29.     }
30.    
    
31.     /* ... etc. */
    
32. }

Nevermind...I figured it out, I must have had some improperly ordered code.