I’m building a management app in which users have to type in a PIN, info is compared to a loaded variable, then the user continues on to a specific page designated for their department. From there, there will be a tree of about five pages that they can stem out to; all dynamic.
How should I manage multiple pages within the DOM?
Initially, my thoughts were to basically create an HTML tree, with a DIV for each department, then tree in the additional pages in that HTML tree, editing dynamic content with JavaScript when required.
I have done some research and came across solutions like templating engines and using iframes. I want this to be a firmly structured and stable application, so I don’t think screwing around iframes would be the best solution.
You should follow the best practices of the whatever framework you choose. I recommend taking a look at ember.js. In ember (and sproutcore) you define views, which can be declared via template or programmatically. So each section of your app would be a view, with subviews. The benefits of ember are:
1) bindings that allow your views to update when their models change
2) a statechart mechanism that allows you to separate concerns and handle app logic
3) flexible view system
4) mechanisms that allow to do things you are going to want to do, like bind views to urls…
If I had to do it in straight js, I would probably develop the simplest possible view system that worked for my needs, to abstract the concept of a view away from the rendering of the dom. I can’t see any way to keep the code clean without it.