backbone (1)

backbone

Backbone是构建javascript应用程序的一个优秀的类库。他简洁、轻量级、功能实在。

backbone采用MVC模式，本身提供了模型、控制器和视图从而我们应用程序的骨架便形成。

backbone依赖于underscore，他是一个类库，提供了60多个函数处理数组操作、函数绑定，以及javascript模板机制。

Backbone 中的MVC

  1. M: model 模型

    • 创建一个模型

      1
      2
      3
      4
      5
      6
      7
      //方法1
      var model_1 = new Backbone.Model({'name':'hello'});

      //方法2

      var Model = Backbone.Model.extend({'name':null});
      var model_2 = new Model({name:'maat'});

    • 模型创建初始化

      1
      2
      3
      4
      5
      6
      7
      8
      9

      var Model = Backbone.Model.extend({
          //可以接收参数
          initialize: function(a){
              alert(a);
          }
      });

      var m = new Model('1');

    • 对模型实例赋值

      第一种，直接定义，设置默认值

        
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      var Man = Backbone.Model.extend({
          initialize: function(){
              alert('Hey, you create me!');
          },
          defaults: {
              name:'张三',
              age: '38'
          }
      });

      var man = new Man;
      alert(man.get('name'));

      第二种，赋值时定义

        
      1
      2
      3
      4
      5
      6
      7
      8
      9
      var Man = Backbone.Model.extend({
          initialize: function(){
              alert('Hey, you create me!');
          }
      });

      var man = new Man;
      man.set({name:'maat'});
      alert(man.get('name'));

    • 监测对象种属性的变化

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      Man = Backbone.Model.extend({
          initialize: function(){
              //初始化时绑定监听
              this.bind("change:name",function(){
                  var name = this.get("name");
                  alert("你改变了name属性为：" + name);
                  //顺便执行下aboutMe方法
                  console.log(this.aboutMe());
              });
          },
          defaults: {
              name:'张三'
          },
          aboutMe: function(){
              return '我叫' + this.get('name') ;
          }
      });
      var man = new Man;
      man.set({name:'maat'})  //触发绑定的change事件，alert。