How to provide logic and history management in Enyo?

Hello everyone,

I've been using Enyo for a few weeks now and I really dig it. Of all the JavaScript app frameworks that I've used, this is by far the one I like the most because of its unique architecture and the use of components.

Still, there is something that I have trouble to understand. Simply put: what is the recommended way to provide logic to an app with Enyo? Usually, you modify the hash tag, do some sort of AJAX request in order to retrieve the matching data, then you format it and append it to the DOM. However, with Enyo you create and modify components and then render them. But how do you keep track of the inner navigation? Moreover, how do you manage the history (which is required with non-linear navigation)?

Should I use the enyo.Router component while declaring all the paths and then render a specific view component? Is there a way to automate this? Should I bind something to the 'hashchange' event? Is there a better way to handle this?

Any insight and example would be greatly appreciated. Thank you in advance :-)

Comments

  • edited July 2014
    Thanks for the kind words. :) We've been knee deep in documentation, so apologies for the delayed response. Actually, on that note, Blake recently proposed updates to the documentation for Router.js (https://github.com/enyojs/enyo/blob/BHV-8192/source/kernel/Router.js). Check it out, especially the useHistory flag, as that should be relevant for you, in addition to the general Router usage documentation.
  • Thank you Aarontam for your answer.

    The link you provided is definitely going to be useful. But I'm not able to find any example implementing an enyo.Router. Is it because it shouldn't be used at the moment?

    Anyway, I'm still a bit unsure about the connection to establish between my router and my components. What would you recommend?

    1) Creating multiple view components and loading one at a time according to the route?
    2) One global view component in which the router will trigger different functions (and therefore load different sub-components)?
    3) Something else?
  • At a high level, you can use enyo.Router to handle hash changes and react accordingly, usually triggering different functions for different paths. I'll try to look for or create a more up-to-date example, but here is a basic use of the router in an early Enyo 2.3 app I wrote: https://github.com/aarontam/college-basketball/blob/master/source/Router.js. There is a dynamic path declared, and the handler for this path switches the data for the view based upon the dynamic portion of the path (the year).
  • Ok, thanks. I think your sample application is going to help.

    I would definitely be interested in looking at your up-to-date example or at other projects that make use of enyo.Router.

    Do not hesitate to keep me up to date if you come across any :-)
Sign In or Register to comment.