Event dispatching from view components

[hesten]

Hi All

I am well familiar with PureMVC in an ActionScript context, and would like to use it for JavaScript as well.

I've looked at the reverse text example, but that uses an implementation of event dispatching that's pretty restricted from my understanding (in a browser compatibility sense).

My question is; How do you do event dispatching from view components (DOM objects) to their mediator natively (or alternatively in jQuery)? The mediator is not part of the DOM so I don't understand how the event would propagate?

[puremvc]

An object need not be part of the DOM (or display list in AS3) in order to place an event handler. You only need to get the element and set the callback method that the event should be passed to.

Here is an excellent page describing the various issues with regard to event handling in JavaScript:
http://www.quirksmode.org/js/introevents.html

From about 3/4 of the way down that page:

Writing an event handling script

So how do you write an event handling script? On this page I give a quick overview for those who need fast answers and want to study the theory later.

Registering an event handler

The first step is registering your event handler. You have to make sure that the browser executes your script whenever the event youve chosen takes place.

There are four models for registering event handlers. inline, traditional, W3C and Microsoft.

Its best to use the traditional model, since it is completely cross-browser compatible and gives much freedom and versatility. To register an event handler, do

:

element.onclick = doSomething;
if (element.captureEvents) element.captureEvents(Event.CLICK);

Now the function doSomething() is registered as the handler of the click event of HTML element element. This means that whenever the user clicks on the element, doSomething() is executed.

[hesten]

Thanks for your answer.

Maybe it's my lack of JavaScript knowledge, but I'm still struggeling with the concept of custom events and eventhandlers.

I don't understand how you'd define and create your own events in the view component and propagate those to the mediator.

The ReverseText example creates a "TextChanged" custom event and dispatches that. From the provided link I don't see how I'd do that (in a browser independent way)?

[hesten]

Ok, now I've implemented the event dispatching/listening using jQuery's bind and trigger.

In the TextComponentMediator:

:

var that = this;
$(this.viewComponent).bind(demo.view.component.TextComponent.TEXT_CHANGED, function (e, data) {
     that.handleEvent(data);
});

(I hate the scope resolving (var that = this)...)

In the TextComponent:

:

$(this).trigger( this.constructor.TEXT_CHANGED, { text: this.getInputText() } );

I think I would prefer a native event model so that the event handling code wouldn't have to be specific to some JS framework (jQuery in this case).

[puremvc]

Here is a good resource on the topic of creating custom events that are cross-browser compatible without having to to lean on jQuery or some other framework to do it. http://www.truerwords.net/articles/web-tech/custom_events.html

Here are the highlights:

• Custom events are not "click" and "scroll" and "changed", but are the truly custom events you define for your own application. Exmaples: message_selected, new_messages_arrived, preference_changed, and editing_cancelled.
• Custom events allow us to decouple the major objects in our code, keeping them self-contained.
• There's a W3C DOM spec for custom events, but it doesn't do us any good because support for it is very uncommon.
• The key to implementing custom events without recreating the entire event subsystem from scratch is to built it on top of the "click" event.
• Event publishers create empty <a> tags, one for each event they support, as needed.
• When a listener subscribes to a publisher's custom event (by name), it's actually subscribing to the invisible/empty <a> tag's 'click' event, but it never needs to know that.
• Data any data can be passed to the listeners as part of the event object.

In the end the code still looks a bit involved, but seems like it might be made into a library unto itself for just handling events.

<Rant>
One of the things that drives me batty about JS frameworks is that they all want to do everything. Why is there no simple custom event framework that does that and nothing else? Focus people, please.
</Rant>

[hesten]

Thanks for the article, interesting read (and sorry for the late response).

[baseten]

I agree with your rant. I'm not sure why there has never been a simple custom event system made for Javascript. It frustrated me for a long time, and so I made one. It has no dependencies and was inspired both by the AS3 event system and notifications in PureMVC. It was only on reading this post today that I thought it might be worth putting it on github.

https://github.com/baseten/notifier-js

I wrote it from scratch while I was creating a custom MVC framework for an HTML5 project. It was only later when I was referring to the PureMVC code that I saw how similar the event systems were... I suppose there's only so many ways to write an Observer pattern!

The MVC framework I wrote used this Notifier for the equivalent of Proxies, Mediators AND Views. The reason being (as the OP points out) the lack of a decent custom event model in JS makes it much harder for Mediators to listen for and translate View Events into System Notifications. The View's Events were not tied into the framework or Facade however, only used for communicating with their Mediators.

Anyway, hopefully it might be useful for someone.

I may add my MVC framework to github at some point in the future as well. Again it was very much inspired by PureMVC, but simpler, with no Commands and with Proxies called Models and Mediators called Controllers!

These dependency injection libraries came up on the Robotlegs forum and it did also get me wondering about the possibility of porting Robotlegs to Javascript:

http://code.google.com/p/jasproject/wiki/JasFac

http://ajaxian.com/archives/squirrel-ioc-dependency-injection-for-javascript

[puremvc]

Had a look at the notifier-js project. Looks pretty straightforward and simple. Might be worthwhile to create some unit tests that could be run on every browser to show it really works on each platform.

Definitely worth looking into if anyone's struggling with the cross-platform custom event problem.

-=Cliff>

[saad]

You may use Delegation Pattern without getting into event dispatching, 3rd party libraries or cross browser issues.

Example:
https://github.com/sshams/puremvc-js-demo-lockabledoor/blob/master/js/view/ApplicationMediator.js
https://github.com/sshams/puremvc-js-demo-lockabledoor/blob/master/js/LockableDoor.js

Discussed this in here as well. http://forums.puremvc.org/index.php?topic=2107.0