9951 explained code solutions for 126 technologies

backbone.jsHow do I create a todo list application using Backbone.js?

To create a todo list application using Backbone.js, you'll need a few pieces of code.

  1. First, create a model for your todo list item. This will include properties for the item's title, description, and completion status.
var Todo = Backbone.Model.extend({
    defaults: {
        title: '',
        description: '',
        completed: false
  1. Next, create a collection to store your todo list items.
var TodoList = Backbone.Collection.extend({
    model: Todo
  1. Create a view to render your todo list items. This view will include a template for the HTML, and a render function to populate the template with data from the collection.
var TodoView = Backbone.View.extend({
    tagName: 'li',
    template: _.template('<h3><%= title %></h3><p><%= description %></p>'),
    render: function(){
        return this;
  1. Create an instance of your collection, and add some todo list items to it.
var todoList = new TodoList();
    { title: 'Mow the lawn', description: 'Fill the gasoline tank and start the engine' },
    { title: 'Wash the car', description: 'Fill the soap tank and start the engine' }
  1. Create a view for the entire todo list. This view will loop through the collection, creating a new instance of the TodoView for each item.
var TodoListView = Backbone.View.extend({
    tagName: 'ul',
    render: function(){
            var todoView = new TodoView({ model: todo });
        }, this);
        return this;
  1. Finally, create an instance of the TodoListView, and render it to the page.
var todoListView = new TodoListView({ collection: todoList });

This will render an unordered list of your todo list items to the page.

Helpful links

Edit this code on GitHub