Backbone.js框架中Model与Collection的用法实例_
  这篇文章主要介绍了Backbone.js框架中Model与Collection的用法实例,Collection是Model的一个有序的集合,需要的伴侣可以参考下
  Model
  关于backbone，最基础的一个东西就是model，这个东西就像是后端开发中的数据库映射那个model一样，也是数据对象的模型，并且应当是和后端的model有相同的属性（仅是需要通过前端来操作的属性）。
  下面就从实例来一步一步的带大家来了解backbone的model究竟是什么样的一个东西。
  首先定义一个html的页面：
  !DOCTYPE html
  html
  head
  titlethe5fire-backbone-model/title
  /head
  body
  /body
  script src="l
  下面的代码需要填到这个html的script标签中的function中。
  1、最简洁的一个对象
  Man = d({
    initialize: function(){
    alert('Hey, you create me!');
    }
  });
  var man = new Man;
  这个就很简洁了，在helloworld里面也有了一个model的呈现，不定义了属性，这里是一个 初始化时的方法，或者称之为构造函数。
  2、对象赋值的两种方法
  第一种，挺直定义，设置默认值。
  Man = d({
  initialize: function(){
    alert('Hey, you create me!');
  },
  defaults: {
    name:'张三',
    age: '38'
  }
  });
  var man = new Man;
  ('name'));
  其次种，赋值时定义
  Man = d({
  initialize: function(){
    alert('Hey, you create me!');
  }
  });
  man.set({name:'the5fire',age:'10'});
  ('name'));
  取值的时候都是用get。
  3、对象中的方法
  Man = d({
  initialize: function(){
    alert('Hey, you create me!');
  },
  defaults: {
    name:'张三',
    age: '38'
  },
  aboutMe: function(){
    return '我叫' + ('name') + ',今年' + ('age') + '岁';
  }
  });
  var man = new Man;
  alert(man.aboutMe());
  4、监听对象中属性的改变
  Man = d({
  initialize: function(){
    alert('Hey, you create me!');
    //初始化时绑定监听
    this.bind("change:name",function(){
    var name = ("name");
    alert("你转变了name属性为：" + name);
    });
  },
  defaults: {
    name:'张三',
    age: '38'
  },
  aboutMe: function(){
    return '我叫' + ('name') + ',今年' + ('age') + '岁';
  }
  });
  var man = new Man;
  man.set({name:'the5fire'}) //触发绑定的change大事，alert。
  5、为对象添加验证规章，以及错误提示
  Man = d({
  initialize: function(){
    alert('Hey, you create me!');
    //初始化时绑定监听
    this.bind("change:name",function(){
    var name = ("name");
    alert("你转变了name属性为：" + name);
    });
    this.bind("error",function(model,error){
    alert(error);
    });
  },
  defaults: {
    name:'张三',
    age: '38'
  },
  validate:function(attributes){
    if(attributes.name == '') {
    return "name不能为空！";
    }
  },
  aboutMe: function(){
    return '我叫' + ('name') + ',今年' + ('age') + '岁';
  }
  });
  var man = new Man;
  man.set({name:''}); //依据验证规章，弹出错误提示。
  6、对象的猎取和保存，需要服务器端支持才能测试。
  首先需要为对象定义一个url属性，调用save方法时会post对象的全部属性到server端。
  Man = d({
  url:'/save/',
  initialize: function(){
    alert('Hey, you create me!');
    //初始化时绑定监听
    this.bind("change:name",function(){
    var name = ("name");
    alert("你转变了name属性为：" + name);
    });
    this.bind("error",function(model,error){
    alert(error);
    });
  },
  defaults: {
    name:'张三',
    age: '38'
  },
  validate:function(attributes){
    if(attributes.name == '') {
    return "name不能为空！";
    }
fetch最佳用法  },
  aboutMe: function(){
    return '我叫' + ('name') + ',今年' + ('age') + '岁';
  }
  });
  var man = new Man;;
  man.set({name:'the5fire'});
  man.save(); //会发送POST到模型对应的url，数据格式为json{"name":"the5fire","age":38}
  //然后接着就是从服务器端猎取数据用法方法fetch([options])
  var man1 = new Man;
  //第一种状况，假如挺直用法fetch方法，那么他会发送get恳求到你model的url中，
  //你在服务器端可以通过推断是get还是post来进行对应的操作。
  man1.fetch();
  //其次种状况，在fetch中加入参数，如下：
  man1.fetch({url:'/getmans/'});
  //这样，就会发送get恳求到/getmans/这个url中，
  //服务器返回的结果样式应当是对应的json格式数据，同save时POST过去的格式。
  //不过接受服务器端返回的数据方法是这样的：
  man1.fetch({url:'/getmans/',success:function(model,response){
    alert('success');
    //model为猎取到的数据
    ('name'));
  },error:function(){
    //当返回格式不正确或者是非json数据时，会执行此方法
    alert('error');
  }});
  注：上述代码仅仅均为可正常执行的代码，不过关于服务器端的实例在后面会有。
  这里还要补充一点，就是关于服务器的异步操作都是通过Backbone.sync这个方法来完成的，调用这个方法的时候会自动的传递一个参数过去，依据参数向服务器端发送对应的恳求。比如你save，backbone会推断你的这个对象是不是新的，假如是新创建的则参数为cr
eate，假如是已存在的对象只是进行了转变，那么参数就为update，假如你调用fetch方法，那参数就是read，假如是destory，那么参数就是delete。也就是所谓的CRUD ("create", "read", "update", or "delete")，而这四种参数对应的恳求类型为POST，GET，PUT，DELETE。你可以在服务器依据这个request类型，来做出相应的CRUD操作。
  Note:
  关于url和urlRoot的事，假如你设置了url，那么你的CRUD都会发送对应恳求到这个url上，但是这样又一个问题，就是delete恳求，发送了恳求，但是却没有发送任何数据，那么你在服务器端就不知道应当删除哪个对象（记录），所以这里又一个urlRoot的概念，你设置了urlRoot之后，你发送PUT和DELETE恳求的时候，其恳求的url地址就是：/baseurl/[model.id]，这样你就可以在服务器端通过对url后面值的提取更新或者删除对应的对象（记录）。
  Collection
  collection是model对象的一个有序的集合，概念理解起来非常简洁，在通过几个例子来看一下，会觉得更简洁。
  1、关于book和bookshelf的例子
  Book = d({
  defaults : { // 感谢网友蓝动力指正改为defaults
  title:'default'
  },
  initialize: function(){
  //alert('Hey, you create me!');
  }
  });
  BookShelf = d({
  model : Book
  });
  var book1 = new Book({title : 'book1'});
  var book2 = new Book({title : 'book2'});
  var book3 = new Book({title : 'book3'});
  //var bookShelf = new BookShelf([book1, book2, book3]); //留意这里面是数组,或者用法a
dd
  var bookShelf = new BookShelf;
  bookShelf.add(book1);
  bookShelf.add(book2);
  bookShelf.add(book3);
  ve(book3);
  //基于underscore这个js库，还可以用法each的方法猎取collection中的数据
  bookShelf.each(function(book){
  ('title'));
  });
  很简洁，不说明
  2、用法fetch从服务器端猎取数据
  首先要在上面的的Bookshelf中定义url，留意collection中并没有urlRoot这个属性。或者你挺直在fetch方法中定义url的值，如下：
  bookShelf.fetch({url:'/getbooks/',success:function(collection,response){
  collection.each(function(book){
  ('title'));
  });
  },error:function(){
  alert('error');
  }});
  其中也定义了两个接受返回值的方法，具体含义我想很简单理解，返回正确格式的数据，就会调用success方法，错误格式的数据就会调用error方法，当然error方法也看添加和success方法一样的形参。
  对应的BookShelf的返回格式如下：[{'title':'book1'},{'title':'book2'}.....]
  3、reset方法
  这个方法的时候是要和上面的fetch进行配合的，collection在fetch到数据之后，会调用reset方法，所以你需要在collection中定义reset方法或者是绑定reset方法。这里用法绑定演示：
  bookShelf.bind('reset',showAllBooks);
  showAllBooks = function(){
  bookShelf.each(function(book){
  //将book数据渲染到页面。
  });
  }
  绑定的步骤要在fetch之前进行。
  下面给出关于collection的完整代码，需要服务器端支持才行，服务器端的搭建在后面会写到。
  !DOCTYPE html
  html
  head
  titlethe5fire-backbone-collection/title
  /head
  body
  /body
  script src="l
           
                              ...
           

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。