第四十六课：MVC和MVVM的开发区别

$(function(){
  //基本的Todo模型，
  var Todo = Backbone.Model.extend({    
    // 设置模型的默认属性
    defaults: {
      content: "empty todo...",
      done: false
    },
    //确保每一个模型的content都不为空
    initialize: function() {
      if (!this.get("content")) {
        this.set({"content": this.defaults.content});
      }
    },
    // 将模型的done属性值置为反，比如，之前的done如果为true，那么调用toggle方法后，就会被置为false
    toggle: function() {
      this.save({done: !this.get("done")});
    },
    //删除模型中的数据
    clear: function() {
      this.destroy();
    }
  });
   //Todo的一个集合，数据通过localStorage存储在本地。
  var TodoList = Backbone.Collection.extend({
    // 设置Collection的模型为Todo
    model: Todo,
    //存储到本地，在todos-backbone的命名空间中
    localStorage: new Store("todos-backbone"),
    done: function() {
      return this.filter(function(todo){ return todo.get(‘done‘); });  //如果模型的done属性为true，就返回此模型
    },
    nextOrder: function() {   //得到当前集合中最后一个模型的order属性值，然后加1.
      if (!this.length) return 1;
      return this.last().get(‘order‘) + 1;
    },    
    //Backbone内置函数，根据todo对象的order属性值进行排列
    comparator: function(todo) {
      return todo.get(‘order‘);
    }
  });
  // 创建一个全局的Todos的collection对象
  var Todos = new TodoList;  

  var TodoView = Backbone.View.extend({
    //下面这个标签的作用是，把template模板中获取到的html代码放到这标签中。
    tagName:  "li",
    // 一个Todo模型显示在页面上的模板
    template: _.template($(‘#item-template‘).html()),

    // 为每一个Todo模型在页面上的视图绑定事件
    events: {
      "click .check"              : "toggleDone",   //点击每一个todo模型的视图时，就会改变此模型done属性值

　　　　"dblclick label.todo-content" : "edit",   //双击此视图时，就可以编辑里面的内容
　　　　"click span.todo-destroy" : "clear",

      "keypress .todo-input"      : "updateOnEnter",    //在视图的内容中按下按键，就会执行undateOnEnter方法
      "blur .todo-input"          : "close"     //可以通过按下enter按键保存，也可以通过鼠标失去焦点保存
    },

    //初始化设置了TodoView和Todo的一对一引用，这里我们可以把todoview看作是todo在页面上的映射。
    initialize: function() {
      _.bindAll(this, ‘render‘, ‘close‘, ‘remove‘);
      this.model.bind(‘change‘, this.render);   //model只要一改变，就会马上在视图上显示
    },
    // 渲染todo模型中的数据到 item-template 中，把生成的html添加到view的el元素中。
    render: function() {
      $(this.el).html(this.template(this.model.toJSON()));return this;
    },
    // 改变模型的done属性值
    toggleDone: function() {
      this.model.toggle();
    },

　　　　edit: function() {
　　　　　　$(this.el).addClass("editing");
　　　　　　this.input.focus();
　　　　},

// 关闭编辑界面，并把修改内容保存到后台，这里会保存在localStorage中
    close: function() {
      this.model.save({content: this.input.val()});
      $(this.el).removeClass("editing");
    },
    // 按下回车之后，才关闭编辑界面
    updateOnEnter: function(e) {
      if (e.keyCode == 13) this.close();
    },
    // 移除对应条目，以及对应的数据对象
    clear: function() {
      this.model.clear();
    }
  }
  var AppView = Backbone.View.extend({
    //绑定页面上主要的DOM节点
    el: $("#todoapp"),
    // 在页面底部显示的统计数据模板
    statsTemplate: _.template($(‘#stats-template‘).html()),
    // 绑定dom节点上的事件
    events: {
      "keypress #new-todo":  "createOnEnter",    //按下enter键，就会新建一个todo模型，显示在页面中"click .todo-clear a": "clearCompleted",   //删除模型的done为true的view
      "click .mark-all-done": "toggleAllComplete"   //如果点击全部完成的元素，那么就把所有的model的done设置为此元素的状态，此元素选上，就设置为true，不选上，就设置为false
    },
    //在初始化过程中，绑定事件到Todos上，当任务列表改变时会触发对应的事件。最后把存在localStorage中的数据取出来。
    initialize: function() {
      //下面这个是underscore库中的方法，用来绑定方法到目前的这个对象中，是为了在以后运行环境中调用当前对象的时候能够找到对象中的这些方法。
      _.bindAll(this, ‘addOne‘, ‘addAll‘, ‘render‘, ‘toggleAllComplete‘);

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

      Todos.bind(‘add‘,     this.addOne);   //给集合绑定事件
      Todos.bind(‘reset‘,   this.addAll);   //取到数据后，就会执行addAll方法
      Todos.bind(‘all‘,     this.render);    //执行完addAll方法后，就会执行render方法，因为，集合取到数据时，会触发reset方法和all方法，但是reset方法会先执行。all事件的意思就是，只要Todos有改变，就会触发此事件
 
      Todos.fetch();    //从服务器请求数据，由于此集合有localStorage属性，就说明，它是从本地的取数据
    },
    render: function() {
      var done = Todos.done().length;    //从本地取到的todo模型中，有多少个的done属性是true。
this.$(‘#todo-stats‘).html(this.statsTemplate({
        total:      Todos.length,
        done:       done
      }));
      //如果全部完成了，就把页面上的checkbox勾上，如果没有，就不用勾上
      this.allCheckbox.checked = (done===Todos.length);
    },
    addOne: function(todo) {     
      var view = new TodoView({model: todo});    //针对每一个todo模型，我们新建一个todoView视图，这样就实现了一个模型todo对应一个视图tudoview。
      this.$("#todo-list").append(view.render().el);   //并把每一个模型对应的视图添加到页面中
    },
    addAll: function() {
      Todos.each(this.addOne);   // 对集合中的每一个模型todo，调用addOne方法。
    },
    //生成一个新Todo的所有属性的字典
    newAttributes: function() {
      return {
        content: this.input.val(),
        order:   Todos.nextOrder(),
        done:    false
      };
    },
    createOnEnter: function(e) {
      if (e.keyCode != 13) return;
      Todos.create(this.newAttributes());  //在集合中创建一个todo模型之后会添加到集合中，这时会触发集合的add事件。在视图appview就会新建这个model的view显示在页面上
      this.input.val(‘‘);
    },
    // 去掉model的done属性值为true的view
    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}); });
    }

  });
  var App = new AppView;   //新建一个视图
});

<html ng-app=‘TestFormModule‘>  //添加ng-app指令到<html>标签中，这个指令会告诉Angular处理整个HTML页面，也就是说ng-app指令标记了AngularJS脚本的作用域，开发者也可以在局部使用ng-app指令，如<div ng-app>，则AngularJS脚本仅在该<div>中运行。
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script src="../angular-1.0.3/angular.min.js"></script>   //引入angular库
    </head>
    <body>
        <form name="myForm" ng-submit="save()" ng-controller="TestFormController">   //ng-controller，一个指令，用于指定当前的模版对应的Controller为TestFormModule。ng-submit，一个指令，form表提交时需要做的事情，这里是调用save方法。
              <input name="userName" type="text" ng-model="user.userName" required/>  //ng-model，一个指令，用于指定input的值对应modeluser的userName变量。也就是说把此元素input绑定到一个叫user.userName的模型变量中
              <input name="password" type="password" ng-model="user.password" required/>  //把此元素input绑定到一个叫user.password的模型变量中
              <input type="submit" ng-disabled="myForm.$invalid"/>
        </form>
    </body>
    <script>
    　　var appModule = angular.module(‘TestFormModule‘, []);   //定义TestFormModule模块
    　　appModule.controller("TestFormController",function($scope){   //这个控制器的作用域$scope对所有<form ng-controller="TestFormModule">标签内的数据绑定有效。一个作用域可以视作视图、模型和控制器协同工作的粘接器。AngularJS使用作用域，这可以帮助模型和视图分离，但是他们两者却是同步的！任何对于模型的更改都会即时反映在视图上；任何在视图上的更改都会被立刻体现在模型中。
           $scope.user={      //初始化模型user
              userName:‘chaojidan‘,
              password:‘‘
           };
           $scope.save=function(){   //声明sava方法
              alert("保存数据!");
           }
      });

    </script>
</html>