backbone中的实例中文注释

// 一个backbone的实例，作者：

// [Jérôme Gravel-Niquet](http://jgn.me/). 这个demo使用了

// [LocalStorage adapter](backbone-localstorage.js)

// 你可以在浏览器中演示它.

 

//当DOM载入完之后加载应用:

$(function() {

 

    // Todo Model

    // 基础 **Todo** model 拥有 `title`, `order`, 和 `done` 属性.

    var Todo = Backbone.Model.extend({

 

        // todo的默认属性.

        defaults : {

            title : "empty todo...",

            done : false

        },

 

        // 保证每个model创建的时候都有`title`.

        initialize : function() {

            if(!this.get("title")) {

                this.set({

                    "title" : this.defaults.title

                });

            }

        },

        // 切换`done`状态.

        toggle : function() {

            this.save({

                done : !this.get("done")

            });

        },

        // 将Todo从*localStorage*和视图中删除.

        clear : function() {

            this.destroy();

        }

    });

 

    // Todo 列表

    // ---------------

 

    // 列表存储在*localStorage*中，代替存储在服务器中

    var TodoList = Backbone.Collection.extend({

 

        // 关联列表的 model.

        model : Todo,

 

        // 以`"todos"`名字空间保存所有Todo.

        localStorage : new Store("todos-backbone"),

 

        // 过滤已完成的Todo.

        done : function() {

            return this.filter(function(todo) {

                return todo.get('done');

            });

        },

        // 过滤列表，保留未完成的Todo.

        remaining : function() {

            return this.without.apply(this, this.done());

        },

        // 尽管我们在localStorage中是无序存储的，但是我们还是按顺序读取和保存的

        nextOrder : function() {

            if(!this.length)

                return 1;

            return this.last().get('order') + 1;

        },

        // 按照原来的顺序保存.

        comparator : function(todo) {

            return todo.get('order');

        }

    });

 

    // 创建一个全局列表 **Todos**.

    var Todos = new TodoList;

 

    // Todo Item View

    // --------------

 

    // todo item的DOM元素

    var TodoView = Backbone.View.extend({

 

        //列表标签.

        tagName : "li",

 

        // 为单个元素缓存模板.

        template : _.template($('#item-template').html()),

 

        // 单个元素的DOM事件.

        events : {

            "click .toggle" : "toggleDone",

            "dblclick .view" : "edit",

            "click a.destroy" : "clear",

            "keypress .edit" : "updateOnEnter",

            "blur .edit" : "close"

        },

 

        // TodoView视图监听 model的事件变化,重新渲染, **Todo** 和 **TodoView** 成一一对应的关系.

        initialize : function() {

            this.model.bind('change', this.render, this);

            this.model.bind('destroy', this.remove, this);

        },

        // 重新渲染单条todo的title.

        render : function() {

            var $el = $(this.el);

            $el.html(this.template(this.model.toJSON()));

            $el.toggleClass('done', this.model.get('done'));

 

            this.input = this.$('.edit');

            return this;

        },

        // 切换model的`"done"`状态.

        toggleDone : function() {

            this.model.toggle();

        },

        // 切换视图为`"editing"`,显示输入框.

        edit : function() {

            $(this.el).addClass("editing");

            this.input.focus();

        },

        // 关闭`"editing"`视图, 保存改变数据到Todo.

        close : function() {

            var value = this.input.val().trim();

 

            if(!value)

                this.clear();

 

            this.model.save({

                title : value

            });

            $(this.el).removeClass("editing");

        },

        // 如果输入 `enter`回车键, 保存编辑项目.

        updateOnEnter : function(e) {

            if(e.keyCode == 13)

                this.close();

        },

        // 移除单条Todo，销毁model.

        clear : function() {

            this.model.clear();

        }

    });

 

    // The Application

    // ---------------

 

    // **AppView**是最外层层UI.

    var AppView = Backbone.View.extend({

 

        // 使用页面上已有的HTML结构.

        el : $("#todoapp"),

 

        // app底部统计的模板.

        statsTemplate : _.template($('#stats-template').html()),

 

        // 为新建Todo和清除已完成Todo创建事件代理.

        events : {

            "keypress #new-todo" : "createOnEnter",

            "click #clear-completed" : "clearCompleted",

            "click #toggle-all" : "toggleAllComplete"

        },

 

        // 初始化的时候绑定 `Todos`列表的事件，add事件会添加到 *localStorage*.

        initialize : function() {

 

            this.input = this.$("#new-todo");

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

 

            Todos.bind('add', this.addOne, this);

            Todos.bind('reset', this.addAll, this);

            Todos.bind('all', this.render, this);

 

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

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

 

            Todos.fetch();

        },

        // 重新渲染只是刷新统计，其他不变.

        render : function() {

            var done = Todos.done().length;

            var remaining = Todos.remaining().length;

 

            if(Todos.length) {

                this.$main.show();

                this.$footer.show();

 

                this.$footer.html(this.statsTemplate({

                    done : done,

                    remaining : remaining

                }));

            } else {

                this.$main.hide();

                this.$footer.hide();

            }

 

            this.allCheckbox.checked = !remaining;

        },

        // 添加一个Todo项，并插入到`<ul>`中.

        addOne : function(todo) {

            var view = new TodoView({

                model : todo

            });

            this.$("#todo-list").append(view.render().el);

        },

        // 一次把所有的Todo添加到 **Todos** 列表中.

        addAll : function() {

            Todos.each(this.addOne);

        },

        // 新建一个Todo赋予属性.

        newAttributes : function() {

            return {

                title : this.input.val().trim(),

                order : Todos.nextOrder(),

                done : false

            };

        },

        // 在input中按回车键会新建一个**Todo** model并且保存到*localStorage*.

        createOnEnter : function(e) {

            if(e.keyCode != 13)

                return;

            if(!this.input.val().trim())

                return;

 

            Todos.create(this.newAttributes());

            this.input.val('');

        },

        // 清除所有已完成Todo models.

        clearCompleted : function() {

            _.each(Todos.done(), function(todo) {

                todo.clear();

            });

            return false;

        },

        toggleAllComplete : function() {

            var done = this.allCheckbox.checked;

            Todos.each(function(todo) {

                todo.save({

                    'done' : done

                });

            });

        }

    });

 

    // 创建一个 **App**.

    var App = new AppView;

});