Before learning BACKBONE.js, we should know what extended javascript lib will be included in BACKBONE.js project.

1.JQuery 2.UNDERSCORE.js

BACKBONE.js brings the conception of MVC into front-end. The major difference between BACKBONE.js MVC and Back-end MVC is the word of C. Generally,back-end C mean ‘controller’,but BACKBONE.js C mean ‘Collection’.



var url  = Backbone.Router.Extend({
      '/isdate': 'getPost',
      '*actions': 'errorPage'

    getPost: function(id){
    errorPage: function(actions){
      alert('sorry we can not find'+actions+'page');


When you are recieving a data from front-end and you want to build(or modify) this data to storage(or database).Of course, before you building this data into database, you must give this data some limitations and write in Model.

var Todo = Backbone.Model.extend({

    // Default attributes for the todo item.
    defaults: function() {
      return {
        title: "empty todo...",
        order: Todos.nextOrder(),
        done: false

    // Ensure that each todo created has `title`.
    initialize: function() {
      if(!this.get("title")) {
          "title": this.defaults().title

    // Toggle the `done` state of this todo item.
    toggle: function() {{
        done: !this.get("done")


Like back-end controller, BACKBONE.js collection do parsing on database.However,BACKBONE.js collection can deal with all model or single model.It very convenient for coder to do more combination on front-end.

var TodoList = Backbone.Collection.extend({
    model: Todo,

    // Save all of the todo items under the `"todos-backbone"` namespace.
    localStorage: new Backbone.LocalStorage("todos-backbone"),

    // Filter down the list of all todo items that are finished.
    done: function() {
        return this.filter(function(todo) {
            return todo.get('done');

    remaining: function() {
        return this.without.apply(this, this.done());
    //without 即是把符合字串者的排除掉
    //apply即傳入函數的意思,這是javascript 原生語法

    nextOrder: function() {
        if(!this.length) return 1; 
        return this.last().get('order') + 1;

    // 讓資料依據order來排列
    comparator: function(todo) {
        return todo.get('order');
    //  return todo.get('JSON中排序的依據');

var Todos = new TodoList;
//這個意思是只創建一個全局的todo  collection

4.View In the demo,its view divid into two parts.


This view acting on every todo item

var TodoView = Backbone.View.extend({

    //... is a list tag.
    tagName: "li",
    //作用:  把<script type="text/template">標籤的html碼放在這之中

    // Cache the template function for a single item.
    template: _.template($('#item-template').html()),
    //抓取id 為item-template 的<script type="text/template">裡面的html碼

    // The DOM events specific to an item.
    events: {
        "click .toggle": "toggleDone",
        "dblclick .view": "edit",
        "click a.destroy": "clear",
        "keypress .edit": "updateOnEnter",
        "blur .edit": "close"
        // blur 指的是輸入域失去焦點時就動作
    //above all 可以參考這個BACKBONE api說明

    // The TodoView listens for changes to its model, re-rendering. Since there's
    // a one-to-one correspondence between a **Todo** and a **TodoView** in this
    // app, we set a direct reference on the model for convenience.
    initialize: function() {
        this.model.on('change', this.render, this);
        this.model.on('destroy', this.remove, this);

    // Re-render the titles of the todo item.
    render: function() {
        this.$el.toggleClass('done', this.model.get('done'));
        //$el 是召喚jQuery 
        this.input = this.$('.edit');
        return this;

    // Toggle the `"done"` state of the model.
    toggleDone: function() {
    // 回到Model的toggle function

    // Switch this view into `"editing"` mode, displaying the input field.
    edit: function() {

    // Close the `"editing"` mode, saving changes to the todo.
    close: function() {
        var value = this.input.val();
        if(!value) {
        } else {
            title: value

    // If you hit `enter`, we're through editing the item.
    updateOnEnter: function(e) {
        if(e.keyCode == 13) this.close();

    // Remove the item, destroy the model.
    clear: function() {



var AppView = Backbone.View.extend({

    // Instead of generating a new element, bind to the existing skeleton of
    // the App already present in the HTML.
    el: $("#todoapp"),

    // Our template for the line of statistics at the bottom of the app.
    statsTemplate: _.template($('#stats-template').html()),

    // Delegated events for creating new items, and clearing completed ones.
    events: {
        "keypress #new-todo": "createOnEnter",
        "click #clear-completed": "clearCompleted",
        "click #toggle-all": "toggleAllComplete"

    // At initialization we bind to the relevant events on the `Todos`
    // collection, when items are added or changed. Kick things off by
    // loading any preexisting todos that might be saved in *localStorage*.
    initialize: function() {

        this.input = this.$("#new-todo");
        this.allCheckbox = this.$("#toggle-all")[0];

        Todos.on('add', this.addOne, this);
        Todos.on('reset', this.addAll, this);
        Todos.on('all', this.render, this);

        this.footer = this.$('footer');
        this.main = $('#main');

        //讓你知道目前從local storage取出的最新狀態

    // Re-rendering the App just means refreshing the statistics -- the rest
    // of the app doesn't change.
    render: function() {
        var done = Todos.done().length;
        var remaining = Todos.remaining().length;

        if(Todos.length) {
                done: done,  //傳值到html
                remaining: remaining //傳值到html
        } else {
            //如果都沒有的話main 和footer div都會消失
        this.allCheckbox.checked = !remaining;

    // Add a single todo item to the list by creating a view for it, and
    // appending its element to the `<ul>`.
    addOne: function(todo) {
        var view = new TodoView({
            model: todo


    // Add all items in the **Todos** collection at once.
    addAll: function() {

    // If you hit return in the main input field, create new **Todo** model,
    // persisting it to *localStorage*.
    createOnEnter: function(e) {
        if(e.keyCode != 13) return;
        if(!this.input.val()) return;

            title: this.input.val()

    // Clear all done todo items, destroying their models.
    clearCompleted: function() {
        _.invoke(Todos.done(), 'destroy');
        return false;

    toggleAllComplete: function() {
        var done = this.allCheckbox.checked;
        Todos.each(function(todo) {
                'done': done

// Finally, we kick things off by creating the **App**.
var App = new AppView;

Front-end layout:

  1. Template:


Copyright © 2013 Mr.Blue Design credit: Blue Chen