How to generate a set of multiple HTML pages with javascript

Question

I'm creating web application which would generate a set of related html pages (each page is like a step) from data in imported json file and each would follow more or less predefined format and I can not use any server language.

What would be possible ways to implement this?

I know I could probably use templating framework but that I think would generate everything in one file and pages would not be bookmarkable or I could use #ids in url.

Are there any other/better ways?

Answer 1

You're using JavaScript in the browser as a client side language, you can't create HTML pages on the server with it. You're probably referring to a single-page website where JavaScript makes it seem like there are subpages.

In the simplest case, it's nothing more than changing the content of a <p> tag when a “link” which is really just an element with an attached event is clicked.

As for the content, you could either hardcode all the subpages into your one page, or load it via AJAX from other, real HTML pages on the server, or some API.

What you're referring to with

use #ids in url

is just using hashes to store the state, as in the “location” within the possible subpages. This has advantages like allowing direct access to a subpage with a link that contains a hash, as well as enabling the browsers native back and forward functions within your system.

Answer 2

Without server-side scripting you will have a single html page which will build itself to represent one of your steps.

If you want to be able to arrive at a specific step then using the #id in url is the best way.

If you really want to have a separate page per step then you will have to create a static page per step, and the page can set itself up based on the window.location.pathname but that becomes unwieldy and only works if you have a fixed number of steps.

You might initially avoid using a templating framework but the reality is that you will only end up inventing your own!

I recommend that you use Knockout . Their tutorials are extremely informative. Do not be put off by it being an MVVM platform, it is small and simple to learn.

In addition to Knockout to perform the dynamic content creation, you can use Sammy to handle routing based on the #id in the url.

Good luck