No description, website, or topics provided.
JavaScript CSS CoffeeScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

BackboneDiorama TodoMVC Example

This is a todo app built using BackboneDiorama. This isn't quite a full TodoMVC app as specified by their site (yet!), but it should help you get started with Diorama.

The app is running on github pages:


BackboneDiorama is everything you need to build client-side web applications. Optimised for developer happiness, it builds on the components of Backbone.js and aims to be the easiest and the fastest way to build for the browser.

  • diorama new projectName builds you a new project with:
    • Logical project structure for Backbone components
    • Coffeescript concatenation and compilation setup
    • Backbone.js+deps and Handlebars templating included and ready for use
  • diorama generate <lots-of-stuff> - Rails-style code generators which provide convention and structure to your projects, assist you with proven patterns and allow you to rapidly prototype. Run diorama generate for the full list.
  • Additional lightweight libraries to plug the gaps in Backbone.js:
  • New to Backbone.js? The built in conventions and patterns mean there's no easier way to get started.
  • Written entirely in and for Coffeescript, for clarity and elegance of code.

Learn more at the project homepage


The entry point to the application is through the TasksController, which is in src/controllers/ Every object has been generated using diorama generate, then adapted.

This deviates from the TodoMVC spec a fair bit, mostly in the interests of getting a first version up and running. Longer term, we're aiming to get it fully compliant.


You will need backbone-diorama installed on your machine:

npm install -g backbone-diorama

This gives you the diorama command. Use diorama compile watch (in the project directory) to auto-compile your coffeescripts to js/application.js. Then, open index.html to start the app.

Check the project homepage for more setup details.