Let’s put what we’ve learned about Backbone into practice with a simple to-do list application. We want the user to be able to CRUD to-dos, and we want items to be persisted between page refreshes. You can build the application using the examples below, or see the finished application in assets/ch12/todos.
<html> <head> <link href="todos.css" media="all" rel="stylesheet" type="text/css"/> <script src="lib/json2.js"></script> <script src="lib/jquery.js"></script> <script src="lib/jquery.tmpl.js"></script> <script src="lib/underscore.js"></script> <script src="lib/backbone.js"></script> <script src="lib/backbone.localstorage.js"></script> <script src="todos.js"></script> </head> <body> <div id="todoapp"> <div class="title"> <h1>Todos</h1> </div> <div class="content"> <div id="create-todo"> <input id="new-todo" placeholder="What needs to be done?" type="text" /> </div> <div id="todos"> <ul id="todo-list"></ul> </div> </div> </div> </body> </html>
The page structure is very straightforward; it just contains a text
input for creating new to-dos (
#new-todo) and a list showing existing to-dos
Now let’s move on to the
script, where the core of our Backbone application is located. We’re going
to wrap everything we put in this class with
jQuery(), ensuring that it will be run only after the page has loaded: ...