Title: Event dispatching from view components Post by: hesten on May 10, 2012, 05:50:36 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? Title: Re: Event dispatching from view components Post by: puremvc on May 10, 2012, 08:19:14 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 Title: Re: Event dispatching from view components Post by: hesten on May 11, 2012, 01:57:22 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)? Title: Re: Event dispatching from view components Post by: hesten on May 11, 2012, 04:56:40 Ok, now I've implemented the event dispatching/listening using jQuery's bind and trigger.
In the TextComponentMediator: var that = this; (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). Title: Re: Event dispatching from view components Post by: puremvc on May 11, 2012, 07:08:55 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:
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> Title: Re: Event dispatching from view components Post by: hesten on May 21, 2012, 11:47:34 Thanks for the article, interesting read (and sorry for the late response).
Title: Re: Event dispatching from view components Post by: baseten on September 03, 2012, 11:16:21 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 Title: Re: Event dispatching from view components Post by: puremvc on September 03, 2012, 12:08:12 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> Title: Re: Event dispatching from view components Post by: saad on September 29, 2014, 10:07:35 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 |