Basic Backbone Walkthrough - example of a todo app

backbone_walkthrough

Walkthrough - example of a todo app

w10/d2_todo_app

Note all along - Each time you write things on a new file, link it on the html with a script tag

Create our “seed data” with a few todos that we gather in a collection

On script.js (main js file)

var todo1 = new todoApp.Models.Todo({title: 'ZYX', importance: ‘low'});
var todo2 = …
todoApp.Collections.todoList = new todoApp.Collections.TodoList( [todo1, todo2] );

So we need to create the name-spacing for this todoApp object

On model/todo.js  (because the model is the first thing we define)

var todoApp = todoApp || {  Models: {},  Collections: {},  Views: {} }

Then create the model Todo: 

on model/todo.js
	todoApp.Models.Todo = Backbone.Model.extend({  etc, etc

And create collection todoList

on collections/todoList.js
	todoApp.Collections.TodoList = Backbone.Collection.extend({  model: todoApp.Models.Todo })

For anything to show on the page, we tell the router to start when the doc is ready

On script.js (main js file)

$(document).ready(function(){
 var router = new todoApp.AppRouter();
  Backbone.history.start();
})

Means you need to create the router and tell it to render something on the page

In routes/router.js

todoApp.AppRouter = Backbone.Router.extend({
  routes: {    "": ‘index'  },
  index: function(){

// To see anything, we need to define a view!
// We anticipate this view will show all elements in my database so it will be linked with a collection

    var todoListView = new todoApp.Views.TodoListView({
      collection: todoApp.Collections.todoList
    })
    todoListView.render();
  }
})

For this to work we create the view named above

todoApp.Views.TodoListView = Backbone.View.extend({
	  // in my html I have this div that will contain the todolist
  el: ‘#todo_all_container',

  // no events to define yet
  // not compiling a template at this stage so we don’t need to initialise yet

  // render function is the important one, here is just a basic idea
  render: function(){  
   console.log(‘rendering the todolist view’)
    })
  },


Next step: improve the render function so it actually renders a thing

  render: function(){
	    // use a variable to avoid jQuery looking in the DOM each time
    var todo_list = $(‘#todo_list');
    // empty the todolist before re-filling it again
    todo_list.empty();

// iterate through the list of todos and append each of them to our todolist
// this.collection is the todoList, itself linked to the various todo models

    this.collection.each(function(todo){
      // instantiate a new view with aim to show its content in a nice way
      // the view is therefore linked to this particular instance of the Todo model

      var todoView = new todoApp.Views.TodoView({model: todo});

      // we then append the result of that view to our page
      todo_list.append( todoView.render() );
    })
  },

For this to work we define the view for the individual todo

This one is basic templating: compile the template defined in the html script; pass our model through the template (using this.model) and set the html of the view element according to that template.
This gives us a nice div that the function returns, so that it can be used by the todoListView

todoApp.Views.TodoView = Backbone.View.extend({
  tagName: 'div',
  initialize: function(){
    // compile template for this view based on our script
    this.todoTemplate = _.template( $('#todo_template').html() );
  },
  render: function(){
    this.$el.html( this.todoTemplate(this.model.toJSON()) );
    return this.el
  }
})