登录
当前位置： 首页 > 编程笔记 >

Backbone.js框架中Model与Collection的使用实例

冷翼
2023-03-14
本文向大家介绍Backbone.js框架中Model与Collection的使用实例，包括了Backbone.js框架中Model与Collection的使用实例的使用技巧和注意事项，需要的朋友参考一下

Model
关于backbone，最基础的一个东西就是model，这个东西就像是后端开发中的数据库映射那个model一样，也是数据对象的模型，并且应该是和后端的model有相同的属性（仅是需要通过前端来操作的属性）。
下面就从实例来一步一步的带大家来了解backbone的model到底是什么样的一个东西。
首先定义一个html的页面：

<!DOCTYPE html>
<html>
<head>
<title>the5fire-backbone-model</title>
</head>
<body>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script>
(function ($) {
/**
 *此处填充代码
 **/
})(jQuery);
</script>
</html>

下面的代码需要填到这个html的script标签中的function中。

1、最简单的一个对象

Man = Backbone.Model.extend({
    initialize: function(){
      alert('Hey, you create me!');
    }
  });
var man = new Man;

这个就很简单了，在helloworld里面也有了一个model的展现，不定义了属性，这里是一个 初始化时的方法，或者称之为构造函数。​​

2、对象赋值的两种方法
第一种，直接定义，设置默认值。

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
  },
  defaults: {
    name:'张三',
    age: '38'
  }
});

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

第二种，赋值时定义

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
  }
});
man.set({name:'the5fire',age:'10'});
alert(man.get('name'));

取值的时候都是用get。

3、对象中的方法

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
  },
  defaults: {
    name:'张三',
    age: '38'
  },
  aboutMe: function(){
    return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
  }
});
var man = new Man;
alert(man.aboutMe());

4、监听对象中属性的变化

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
    //初始化时绑定监听
    this.bind("change:name",function(){
      var name = this.get("name");
      alert("你改变了name属性为：" + name);
    });
  },
  defaults: {
    name:'张三',
    age: '38'
  },
  aboutMe: function(){
    return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
  }
});
var man = new Man;
man.set({name:'the5fire'}) //触发绑定的change事件，alert。

5、为对象添加验证规则，以及错误提示

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
    //初始化时绑定监听
    this.bind("change:name",function(){
      var name = this.get("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 '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
  }
});
var man = new Man;
man.set({name:''}); //根据验证规则，弹出错误提示。

6、对象的获取和保存，需要服务器端支持才能测试。
首先需要为对象定义一个url属性，调用save方法时会post对象的所有属性到server端。

Man = Backbone.Model.extend({
  url:'/save/',
  initialize: function(){
    alert('Hey, you create me!');
    //初始化时绑定监听
    this.bind("change:name",function(){
      var name = this.get("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 '我叫' + this.get('name') + ',今年' + this.get('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为获取到的数据
    alert(model.get('name'));
  },error:function(){
    //当返回格式不正确或者是非json数据时，会执行此方法
    alert('error');
  }});

注：上述代码仅仅均为可正常执行的代码，不过关于服务器端的实例在后面会有。
这里还要补充一点，就是关于服务器的异步操作都是通过Backbone.sync这个方法来完成的，调用这个方法的时候会自动的传递一个参数过去，根据参数向服务器端发送对应的请求。比如你save，backbone会判断你的这个对象是不是新的，如果是新创建的则参数为create，如果是已存在的对象只是进行了改变，那么参数就为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 = Backbone.Model.extend({

defaults : {  // 感谢网友蓝色动力指正改为defaults

title:'default'

},

initialize: function(){

//alert('Hey, you create me!');

}

});

BookShelf = Backbone.Collection.extend({

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]); //注意这里面是数组,或者使用add

var bookShelf = new BookShelf;

bookShelf.add(book1);

bookShelf.add(book2);

bookShelf.add(book3);

bookShelf.remove(book3);



//基于underscore这个js库，还可以使用each的方法获取collection中的数据

bookShelf.each(function(book){

alert(book.get('title'));

});

很简单，不解释
2、使用fetch从服务器端获取数据
首先要在上面的的Bookshelf中定义url，注意collection中并没有urlRoot这个属性。或者你直接在fetch方法中定义url的值，如下：

bookShelf.fetch({url:'/getbooks/',success:function(collection,response){

collection.each(function(book){

alert(book.get('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>
  <title>the5fire-backbone-collection</title>
</head>
<body>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script>
(function ($) {
  //collection是一个简单的models的有序集合
  //1、一个简单的例子

  Book = Backbone.Model.extend({
    defaults : {  // 感谢网友蓝色动力指正改为defaults
      title:'default'
    },
    initialize: function(){
      //alert('Hey, you create me!');
    }
  });
  BookShelf = Backbone.Collection.extend({
    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]); //注意这里面是数组,或者使用add
  var bookShelf = new BookShelf;
  bookShelf.add(book1);
  bookShelf.add(book2);
  bookShelf.add(book3);
  bookShelf.remove(book3);
  /*
  for(var i=0; i<bookShelf.models.length; i++) {
    alert(bookShelf.models[i].get('title'));
  }
  */
  //基于underscore这个js库，还可以使用each的方法获取collection中的数据
  bookShelf.each(function(book){
    alert(book.get('title'));
  });

  //2、使用fetch从服务器端获取数据,使用reset渲染
  bookShelf.bind('reset', showAllBooks);
  bookShelf.fetch({url:'/getbooks/',success:function(collection,response){
    collection.each(function(book){
      alert(book.get('title'));
    });
  },error:function(){
    alert('error');
  }});
  showAllBooks = function(){
    bookShelf.each(function(book){
      ​//将book数据渲染到页面。
    });
  }
  //上述代码仅仅均为可正常执行的代码，不过关于服务器端的实例在后面会有。
})(jQuery);
</script>
</html>
 类似资料：
  • MVC框架与Backbone.js

    MVC框架 零框架解决方案 Backbone的加载 Backbone的用法 Backbone.View 基本用法 initialize方法 el属性，$el属性 tagName属性，className属性 template方法 events属性 listento方法 remove方法 子视图（subview） Backbone.Router routes属性 Backbone.history Ba

  • 第二章 Backbone.js 中的 Model 实践

    上一章主要是通过简单的代码对Backbonejs做了一个概括的展示，这一章开始从Model层说起，详细解释Backbonejs中的Model这个东西。 对于Model这一部分，其官网是这么说的："Model是js应用的核心，包括基础的数据以及围绕着这些数据的逻辑：数据转换、验证、属性计算和访问控制"。这句话基本上高度概括了Model在一个项目中的作用。实际上，不仅仅是js应用，在任何以数据收集和处

  • Javascript MVC框架Backbone.js详解

    本文向大家介绍Javascript MVC框架Backbone.js详解，包括了Javascript MVC框架Backbone.js详解的使用技巧和注意事项，需要的朋友参考一下 随着JavaScript程序变得越来越复杂，往往需要一个团队协作开发，这时代码的模块化和组织规范就变得异常重要了。MVC模式就是代码组织的经典模式。 （……MVC介绍。） （1）Model Model表示数据层，也就是程

  • JavaScript的Backbone.js框架的一些使用建议整理

    本文向大家介绍JavaScript的Backbone.js框架的一些使用建议整理，包括了JavaScript的Backbone.js框架的一些使用建议整理的使用技巧和注意事项，需要的朋友参考一下 Backbone 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件；集合附有可枚举函数的丰富API

  • JavaScript的Backbone.js框架入门学习指引

    本文向大家介绍JavaScript的Backbone.js框架入门学习指引，包括了JavaScript的Backbone.js框架入门学习指引的使用技巧和注意事项，需要的朋友参考一下 1.简介 最近在做一个大型网上银行项目前端的优化，需要使用一个胖客户端的优化，大概思路就是前端通过Ajax 请求去后端获取数据，以Jason的格式返回，然后显示在页面上。由于这个系统非常庞大，胖客户端方案难免需要在客

  • 深入解析JavaScript框架Backbone.js中的事件机制

    本文向大家介绍深入解析JavaScript框架Backbone.js中的事件机制，包括了深入解析JavaScript框架Backbone.js中的事件机制的使用技巧和注意事项，需要的朋友参考一下 事件模型及其原理 Backbone.Events就是事件实现的核心，它可以让对象拥有事件能力 对象通过listenTo侦听其他对象，通过trigger触发事件。可以脱离Backbone的MVC，在自定义的

相关阅读

数组与java Collection框架中的任何集合之间的区别？深入解析Backbone.js框架的依赖库Underscore.js的作用多个Model子类的Backbone.js集合JavaScript的Backbone.js框架环境搭建及Hellow world示例YII2框架中日志的配置与使用方法实例分析

相关文章

Pycharm Web框架Node.js Express 框架JOGL Frame框架实时数仓之 Kappa 架构与 Lambda 架构Objective_C基础框架

相关问答

模拟框架中的模拟与监视实体框架6中的多异步？我如何强制Spring框架使用我的日志框架？Spring框架中原型bean作用域的实现使用原型类与在Java中拥有映射框架/层

相关工具

Backbone.jsTcl Web应用框架S框架NLF框架.NET.Core.Entity框架

相关文档

Backbone.js 中文文档Developing Backbone.js Applications 中文版Truffle 框架中文文档Django 入门框架FastAdmin 框架文档
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.