Custom selector module and attaching events to DOM elements

[aymanfarhat]

The more I work with Fries the more realize how important this can be for future releases. Given how stack.js works in Fries, which is basically replacing DOM elements from one page to another in order to achieve navigation, it is impossible to attach events to DOM elements and keep them working beyond page navigation via stack.js

This is why all core Fries modules end up attaching events to the window and later in the callbacks checking where the target of the event occurred. If there doesn't exist an alternative pattern for stack.js to follow in order to maintain attachment of elements to events I suggest the following.

2 modules:

1. A selector module for allowing users to easily select DOM elements(jQuery style) without having to resort to 3rd party libraries like zepto and which can be heavily by the core Fries modules too.
2. An events module which allows users to attach events to individual DOM elements instead of the window. It would work in such a way that it would still be listening to events against only the window yet keeping track of registered events listeners against elements in a dictionary data structure. Thus its work would be encapsulating the process of catching a window event, checking the event target and associating the event target with a registered DOM element/event pair and calls its respective registered callback function.

I think this can hugely impact the friendliness of Fries especially for new comers, and modularity ad things will grow. If you're going to put this on the road man I am definitely in for this contribution :)

[jaunesarmiento]

Actually, Fries fires a push event whenever you push a new page to the DOM. What you can do for now is to catch this event and attach your event handlers from there.

I really like your second suggestion but I still don't see the need of jQuery style selector module. Let's discuss this further. :)

[hell03610]

Hi, I'm trying to emulate a page rendered with data from server, thinking in a phonegap app, so i need to know which page is just loaded in dom. I'm attached to push event, but i cannot ask for the page-id as the page is the container and it is not replaced, just its innerhtml. Yes, i could ask for something within, but there is not root tag inside page, page is the perfect candidate...so i chaged a little stack.js so when it trows the event, it has the id of the page that was just pushed. (or maybe stack.js should change the id of the page?, i think jqm does that...)

Back button was not working in that example, so i had to move inside doXHR the cachePush before doing the call, as onSuccess was winning the race and inserting the new id in the cacheBack stack instead of the old one.

Anyone has played to try to have fries pages locally and remote data served by jsons?

You can see an example here: https://github.com/hell03610/fries/tree/serverside
In files master.html and detail.html

FingerBlast is disabled, as I could not managed the up button in details to work properly. I use the "Emulate touch events" from Chrome Dev instead.

[jaunesarmiento]

Not doing this anytime soon. Focusing on other features.