This is part 2 in a series of posts about creating a web-based replacement for the Firefox Home iOS app. Part 1 can be found here.
When I ran it and tried out the navigation, things were not working as expected. The page state wasn’t being saved when I would browse from the settings page to the home page and back, meaning my hiding and showing of elements was failing. I had put links to each page in the main footer, and they would take you to the respective page, but old content was being shown. I was adjusting styles between each build, and those changes weren’t being reflected properly. In short, it was a mess.
After more reading through the JQM site, I realized I was going to have to change my approach. Probably the most unique thing about JQM is the navigation paradigm. It’s very different from what I was used to. Each time it needs to access content, it will make an AJAX call behind the scenes and insert that content into the DOM. There are ‘transitions’ between pages, but they are not pages in the sense of separate files in your project. They can be, but everything ends up in one big container anyway.
I ended up using multi-page templates, all housed in default.aspx. I ditched my master page and set up separate div elements for each page. I had to duplicate the header and footer markup, which I’m not thrilled about, but it isn’t much and I might find a better solution in the future. I experimented with using true single-page templates, but they just didn’t work how I wanted, whereas in the multi-page scenario everything flowed as I expected. DOM size wasn’t too much of a concern because apart from the page for bookmarks, the other pages have little markup in them. It may be possible to incorporate a master page into the JQM navigation model, but I’d rather press on with the actual functionality.
Next, how to handle transitions to the current page, and others in the DOM.