Javascript Screens is a simple Screen system for Javascript.
¿What does screen mean in this project? A dynamic self-contained page in a web-site.
That project features a ScreenFactory where you can register new Screens. Each Screen is
* A javascript class
* Extended from the Screen class
* Autowired to a Sammy.js route
* Which self renders an associated .haml file
* Using a ScreenName_18n.json file for internationalized copys
* Bound to dynamic data using knockout.js
* With automatic routing for elements with the css class “.link”
* And cleaner markup, getting rid of knockout.js’ data-bind attributes thanks to Knockout.unobstrusive.js plugin for Knockout.js
It uses:
- HTML5 Boilerplate as a base.
- John Resig’s Simple Javascript Inheritance
- Sammy.js to manage routes
- Knockout.js to bind data using MVVM
- Knockout.unobstrusive.js to clean HTML of logic
- Lab.js to load scripts in an ordered way
You can create new screens extending from class Screen. There are 2 example screens, Index.js and Content.js
You must register new screens using
APP.register(‘key’, new ScreenName());
And you start sammy.js by defining
APP.init(id) where id is the id of the element Sammy will be working on.
You can add css class “.link” to automatically route to that id. For instance
%button#about.link=About will route to #/about
It uses sammy.haml.js plugin for Sammy, which works with haml.js to render .haml files client-side, but you can disable it and use regular html files, or use another template engine like mustache, or whichever you like most.