[Deprecated port] Bug in mediator and views components

[fromi]

I may have found a bug of conception in this PureMVC javascript port :

I found it by following one specific action in the EmployeeAdmin sample.

In the ApplicationFacade.startup method, the app object is given : it is the Dom node of id="application" with 3 properties :
application.userForm, application.userList and application.rolePanel. I followed the rolePanel component.

application.rolePanel is the Dom node of id="roleListPanel".

I followed the reference into the PureMVC code, and found it finally used in the RolePanelMediator (that seems logic).

The problème is, in RolePanelMediator, an eventListener is binded like this :

rolePanel.addEventListener( RolePanel.ADD, Relegate.create(this,this._onAddRole) );

Where rolePanel is the Dom node of id="roleListPanel".
This action does nothing to me : you add an eventListener on a "div" Dom node. The equivalent action is in fact done in the RolePanel view component by :

document.getElementById('addRoleButton').onclick = Relegate.create(this,this.__onAdd);

Which is not the right place in the PureMVC philosophy to bind event listeners.

Unless I am totally wrong, there is a problem somewhere.

I think there is 2 solutions :
1) removing the Mediator role for binding event listeners, and every unused arguments (starting with argument app in ApplicationFacade.startup).
2) removing the bindings in views components and finding a solution to keep the Mediator role.

The 2nd solution follows PureMVC philosophy but seems harder to proceed.

I hope that I'm right, and that this post will be useful !

[fromi]

I have found the difference between ASC3 view component and JS view component "Role Panel"

In ASC3, you have :
        <!-- Add Role Button -->
        <mx:Button label="Add" click="sendEvent( ADD )"
            enabled="{roleCombo.selectedItem != RoleEnum.NONE_SELECTED}"/>

In JS :
document.getElementById('addRoleButton').onclick = Relegate.create(this,this.__onAdd);

In JS you should rather use something like :
document.getElementById('addRoleButton').onclick = sendEvent( ADD );

And then adapt the PureMVC JS framework to work that way.

[Tekool]

document.getElementById('addRoleButton').onclick = Relegate.create(this,this.__onAdd);

Which is not the right place in the PureMVC philosophy to bind event listeners.

This code is located in a view. Views are independent from the PureMVC framework. Here, RolePanel is not a dom element but a Javascript pseudo-class made to wrap the DOM element on which we cannot directly rely to dispatchEvent (not on all browsers...). Look at it as a Javascript "code behind". It looks like a mediator, but it's just a Javascript UI component.

I will have preferred not to depends on our own EventDispatcher class, but we need it for complete compatibility. I've started to build a JQuery example to show how to use the PureMVC framework with JQuery. With JQuery, or any another JS framework, I'm sure you can rely on customs EventDispatcher not to have to depends on a view helper as in the Employee Admin example.

In JS you should rather use something like :
document.getElementById('addRoleButton').onclick = sendEvent( ADD );

We sadly cannot do this either, as you need at least to declare your sendEvent method declaration. You need some code behind, so you need this RolePanel.js component. Look at RolePanel.mxml in the PureMVC AS3 Employee Admin demo you will understand that RolePanel.js is its equivalent.

If you find a better solution with a Javascript framework dedicated to UI let us know.