Cross-browser friendly iLearnPad with jQueryMobile?

Our initial attempt is also going to be based on the Model View Controller pattern (MVC) so that we can treat markup, data and the guiding logic in between separately. To this end we're going to make use of the following link that introduces us to the Backbone.js library to handle MVC and the Underscore.js library for handling the repetitive layout aspects of the application, otherwise known as templating:

http://javascriptplayground.com/blog/2012/04/backbone-js-tutorial-1

Here's our initial attempt:

Here's some of the menu list html showing firstly the template for the repeating elements of the menu list referencing data items from the model e.g. <%= title %>, <%= pathMenu %>:



and secondly, once the page has loaded, the filled out template with enclosing "divs" decorated with jQuery Mobile "data-role" attributes e.g. data-role="page", data-role="header", data-role="content":


 
Conclusion: OK so we´re not there yet - clearly jQuery Mobile with its mobile device look and feel styling is yet to make its mark, but at least we have a taste for how Backbone can be used to organize the pages of the application using a collection and views and how Underscore in a clumsy fashion can be used to layout the repeating elements of the menu and the selected picture pages.