Databases
StackOverflow2013
Postsdbo
PODispatching and handling a custom event from inside non-DOM object
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODispatching and handling a custom event from inside non-DOM object
    primarykey
    data
    text
    <p>My app needs to connect to, sync with, and work with web videos. I am writing an interface class between my app and all the web video players it might run into. The interface class will determine what kind of video player it's dealing with, set up listeners against the player object appropriate for that player, and send out normalized events for my app to listen to. For example, an html5-enabled video player can be asked for <code>.currentTime</code>, while Youtube Flash API accepts the request <code>.getCurrentTime()</code> instead. </p> <p>In the example below, the interface class is listening to events such as <code>playing</code> and <code>seeking</code>, and once it hears such an event, it sends out an event of its own. The layer above it would listen to events coming from the interface, and call the appropriate functions in my app.</p> <p><strong>The code</strong><br> In the layer between my app and the interface class: </p> <pre><code>var inter = new VideoInterface( TargetVideoId ); inter.addEventListener("playing", function(){ // Doesn't compile console.log('Heard playing from interface...'); }, false ); $(inter).bind( "isPlaying", function(evt) { // Doesn't do anything console.log('Heard playing from interface...'); myApp.start(); }); </code></pre> <p>The <code>VideoInterface</code> class, adding listeners and handlers after locating an HTML5 player:</p> <pre><code>$(vidId).bind({ seeking: function() { console.log('Heard seeking, dispatching event...'); var e = $.event({ type: "isSeeking", message: "stuff", date: new Date() }); $.trigger(e); }, playing: function() { console.log('Heard playing, dispatching event...'); $.event.trigger({ type: "isPlaying", message: "stuff", date: new Date() }); }, pause: function() { console.log('Heard pause, dispatching event...'); $.event.trigger({ type: "isPaused", message: "stuff", date: new Date() }); } }); </code></pre> <p><strong>The problem</strong><br> I'm not sure whether the listener isn't listening, or the event isn't firing, but one way or another, the events fired from inside the interface class aren't reaching the mid-layer where they would be passed to my app. <code>Heard playing, dispatching event...</code> and the like are the only messages I see in my console -- the ones that trigger on catching the event in the mid-layer don't appear. I've read that you can't attach event listeners to variables, or objects in this case specifically, but if so, how can I accomplish the effect that I want (which, again, is for an object to send out an event that anything listening to it can catch)?</p> <p><strong>Edit</strong><br> I've solved my problem by adding a <code>bindListenersFor( obj )</code> method to my VideoInterface class. <code>obj</code> is a reference to my app, and the interface already has an internal reference to the video object. The code now looks something like this:</p> <pre><code>var inter = new VideoInterface( videoReference ); var app = new App( inter ); inter.bindListenersFor( app ); </code></pre> <p>The relevant interface code: </p> <pre><code>bindListenersFor : function( obj ) { thisClass = this; $(this.videoHandle).bind({ seeking: function() { obj.seek( thisClass.getCurTime() ); }, playing: function() { obj.start(); }, pause: function() { obj.pause(); } }); }, play : function() { this.videoHandle.play(); }, pause : function() { this.videoHandle.pause(); }, { ... } </code></pre> <p>Now the two can talk among each other, thanks to the reference to the main app object being passed into the interface after the app itself has loaded (with the interface as one of the arguments already). Still, something about this feels inelegant, so the question of sending and listening for custom variable events remains open. </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USsg.cc
    1. USsg.cc
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PODispatching and handling a custom event from inside non-DOM object
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload