`

Backbone入门指南(五):Collection (数据模型集合)

阅读更多

本文转自:http://yujianshenbing.iteye.com/

 

8. Collection (数据模型集合)

  如果将一个Model对象比喻成数据库中的一条记录,那么Collection就是一张数据表。它表示为一个模型集合类,用于存储和管理一系列相同类型的模型对象。

8.1 创建集合

  集合用于组织和管理多个模型,但它并不是必须的,如果你的某个模型对象是唯一的(单例),那么你没必要将它放到集合中。

  我们来看一个创建集合的例子:

 

Js代码   收藏代码
  1. // 定义模型类  
  2. var Book = Backbone.Model.extend({  
  3.     defaults : {  
  4.         name : ''  
  5.     }  
  6. });  
  7.   
  8. // 定义集合类  
  9. var BookList = Backbone.Collection.extend({  
  10.     model : Book  
  11. });  
  12.   
  13. // 创建一系列模型对象  
  14. var book1 = new Book({  
  15.     name : 'Effective Java中文版(第2版)'  
  16. });  
  17. var book2 = new Book({  
  18.     name : 'JAVA核心技术卷II:高级特性(原书第8版)'  
  19. });  
  20. var book3 = new Book({  
  21.     name : '精通Hibernate:Java对象持久化技术详解(第2版)'  
  22. });  
  23.   
  24. // 创建集合对象  
  25. var books = new BookList([book1, book2, book3]);  

 

  在这个例子中,我们定义了模型类Book和集合类BookList,然后创建了3个模型对象,并将它们放到一个集合对象中。(你可以在控制台输出books.models属性,用来查看集合中包含的模型对象列表)

  我们为了创建3个Book模型对象,对Book类显式实例化了3次,其实Model本身已经提供了更简单的方法来复制一个模型,例如:

Js代码   收藏代码
  1. var book1 = new Book({  
  2.     name : 'Effective Java中文版(第2版)'  
  3. });  
  4.   
  5. var book2 = book1.clone();  
  6. book2.set('name''JAVA核心技术卷II:高级特性(原书第8版)');  
  7.   
  8. var book3 = book1.clone();  
  9. book3.set('name''精通Hibernate:Java对象持久化技术详解(第2版)');  

 

  在段代码中,我们使用模型的clone()方法来复制一个和当前对象相同(包括数据)的新对象,这可以简化我们创建模型的流程。

 

  在实例化集合对象时,除了可以向构造函数中添加已经创建好的模型列表(就像上面的例子那样),我们还可以直接传递模型数据,集合会自动将这些数据转换为模型对象,例如:

 

Js代码   收藏代码
  1. // 定义模型类  
  2. var Book = Backbone.Model.extend({  
  3.     defaults : {  
  4.         name : ''  
  5.     }  
  6. });  
  7.   
  8. // 定义集合类  
  9. var BookList = Backbone.Collection.extend({  
  10.     model : Book  
  11. });  
  12.   
  13. var models = [{  
  14.     name : 'Effective Java中文版(第2版)'  
  15. }, {  
  16.     name : 'JAVA核心技术卷II:高级特性(原书第8版)'  
  17. }, {  
  18.     name : '精通Hibernate:Java对象持久化技术详解(第2版)'  
  19. }];  
  20.   
  21. // 创建集合对象  
  22. var books = new BookList(models);  

 

 

  运行这个例子,并在控制台输出books.models属性,你可以看到集合中存储的是Book模型类的实例,而并非我们在models数组中声明的原始数据。

  这是因为我们在声明BookList集合类的时候,就已经设置了model属性,该属性指向集合中存储的模型对象的构造函数,当我们传递原始数据时,集合会自动创建model中定义的模型类,并将原始数据传递给它。

  (如果你在定义集合类的时候没有设置model,那么集合会默认将原始数据转换为Backbone.Model类的实例)

 

  我们之所以要使用extend来继承Backbone.Collection类,是因为我们希望定义一个自己的集合类,并向其中扩展更多的自定义方法。如果你的集合类仅仅是用于简单地存储和管理模型对象,且Backbone.Collection类所提供的方法已经可以满足你的要求,那么你可以直接实例化一个Backbone.Collection,同时也可以像上面一样实现原始数据和模型对象的自动转换,例如:

 

Js代码   收藏代码
  1. // 定义模型类  
  2. var Book = Backbone.Model.extend({  
  3.     defaults : {  
  4.         name : ''  
  5.     }  
  6. });  
  7.   
  8. var models = [{  
  9.     name : 'Effective Java中文版(第2版)'  
  10. }, {  
  11.     name : 'JAVA核心技术卷II:高级特性(原书第8版)'  
  12. }, {  
  13.     name : '精通Hibernate:Java对象持久化技术详解(第2版)'  
  14. }];  
  15.   
  16. // 创建集合对象  
  17. var books = new Backbone.Collection(models, {  
  18.     model : Book  
  19. });  

 

 

  在本例中,我们没有通过extend定义自己的集合类,而是直接实例化Collection类。我们依然传入了原始数据,但同时我们在构造函数的第2个参数(配置对象)中设置了model属性,Collection通过它就能知道要将原始数据转换为哪个模型类的实例。

8.2 向集合中添加模型

  集合提供了3个方法允许我们动态地向集合中动态插入模型:

 

  • add():向集合中的指定位置插入模型,如果没有指定位置,默认追加到集合尾部
  • push():将模型追加到集合尾部(与add方法的实现相同)
  • unshift():将模型插入到集合头部

 

  这些方法很容易理解,但我们还是通过一个例子来说明:

 

Js代码   收藏代码
  1. // 定义模型类  
  2. var Book = Backbone.Model.extend({  
  3.     defaults : {  
  4.         name : '',  
  5.         price : 0  
  6.     }  
  7. });  
  8.   
  9. // 创建集合对象  
  10. var books = new Backbone.Collection(null, {  
  11.     model : Book  
  12. });  
  13.   
  14. books.add({  
  15.     name : '构建高性能Web站点',  
  16.     price : 56.30  
  17. });  
  18.   
  19. books.push({  
  20.     name : '深入分析Java Web技术内幕',  
  21.     price : 51.80  
  22. });  
  23.   
  24. books.unshift({  
  25.     name : '编写高质量代码:Web前端开发修炼之道',  
  26.     price : 36.80  
  27. });  
  28.   
  29. books.push({  
  30.     name : '基于MVC的JavaScript Web富应用开发',  
  31.     price : 42.50  
  32. }, {  
  33.     at : 1  
  34. });  
  35.   
  36. books.unshift({  
  37.     name : 'RESTful Web Services Cookbook中文版',  
  38.     price : 44.30  
  39.   
  40. }, {  
  41.     at : 2  
  42. });  
  43.   
  44. // 在控制台输出集合中的模型列表  
  45. console.dir(books.models);  

 

 

  在例子中,我们通过3个方法向集合中添加了多个模型,最后,我们在控制台输出了集合中的模型列表。请仔细观察和分析我们调用的方法,以及最终列表中模型的排列顺序:

  这些方法的作用和上面介绍的一样,用于将模型添加到集合中不同的位置,但当我们设置了at配置之后,它们就变得完全一样了,因为它们会忽略自身的规则,将模型插入到at所指向的位置。

  当数据被成功添加到集合中时,集合会触发add事件,执行所有监听add事件的方法。除非我们在调用add()方法时设置了silent配置项,则会忽略事件的触发。

8.3 操作集合中的模型

  在Underscore中,提供了许多对对象和数组集合进行操作的方法,这些方法已经被Backbone添加到Collection类的原型中。这意味着你可以使用Underscore中的集合方法来操作Collection集合中的数据,例如each()、map()、find()等方法。

  但有一些方法我们还是要单独介绍它们,因为Collection对这些方法进行了重写,它们和Underscore中的同名方法不完全相同。(这也是为什么我要在上面单独介绍模型的添加方法)

  删除模型:

  集合类提供了3个方法用于从集合中移除模型对象,分别是:

 

  • remove():从集合中移除一个或多个指定的模型对象
  • pop():移除集合尾部的一个模型对象
  • shift():移除集合头部的一个模型对象

 

  这些方法与添加的方法是对应的,而且当模型被移除成功后,会触发集合对象的remove事件,除非你在移除时使用了silent配置。

  这些方法很容易理解,但还是让我们通过一个简单的例子来说明:

 

Js代码   收藏代码
  1. // 定义模型类  
  2. var Book = Backbone.Model.extend({  
  3.     defaults : {  
  4.         name : '',  
  5.         price : 0  
  6.     }  
  7. });  
  8.   
  9. // 定义初始化数据  
  10. var data = [{  
  11.     name : '构建高性能Web站点',  
  12.     price : 56.30  
  13. }, {  
  14.     name : '深入分析Java Web技术内幕',  
  15.     price : 51.80  
  16. }, {  
  17.     name : '编写高质量代码:Web前端开发修炼之道',  
  18.     price : 36.80  
  19. }, {  
  20.     name : '基于MVC的JavaScript Web富应用开发',  
  21.     price : 42.50  
  22. }, {  
  23.     name : 'RESTful Web Services Cookbook中文版',  
  24.     price : 44.30  
  25.   
  26. }]  
  27.   
  28. // 创建集合对象  
  29. var books = new Backbone.Collection(data, {  
  30.     model : Book  
  31. });  
  32.   
  33. books.remove(books.models[2]);  
  34. books.pop();  
  35. books.shift();  
  36.   
  37. // 在控制台输出集合中的模型列表  
  38. console.dir(books.models);  

 

 

  在本例中,我们分别调用了remove()方法移除了集合中第2个模型,调用pop()方法移除了最后一个模型,调用shift()方法移除了第一个模型。最后我们在控制台输出集合中剩下的模型列表,请查看控制台输出结果,它和你想象的结果是一致的。

 

  在集合中查找模型:

Collection定义了一系列用于快速从集合中查找我们想要的模型的方法,包括:

 

  • get():根据模型的唯一标识(id)查找模型对象
  • getByCid():根据模型的cid查找模型对象
  • at():查找集合中指定位置的模型对象
  • where():根据数据对集合的模型进行筛选

 

  前面前面一片介绍数据模型时我们提到,每个模型对象都有一个唯一标识(id),它与数据库中记录的id保持同步。实际上,每个模型对象内部还会自动创建一个cid,它用来标识每一个模型(请注意将id和cid区分开,它们没有任何关系)。

  集合对象提供了两个方法用于根据id和cid来查找模型对象,分别是get()方法和getByCid()方法,例如:

 

Js代码   收藏代码
  1. // 定义模型类  
  2. var Book = Backbone.Model.extend({  
  3.     defaults : {  
  4.         name : '',  
  5.         price : 0  
  6.     }  
  7. });  
  8.   
  9. // 定义初始化数据  
  10. var data = [{  
  11.     id : 1001,  
  12.     name : '构建高性能Web站点',  
  13.     price : 56.30  
  14. }, {  
  15.     id : 1002,  
  16.     name : '深入分析Java Web技术内幕',  
  17.     price : 51.80  
  18. }, {  
  19.     id : 1003,  
  20.     name : '编写高质量代码:Web前端开发修炼之道',  
  21.     price : 36.80  
  22. }, {  
  23.     id : 1004,  
  24.     name : '基于MVC的JavaScript Web富应用开发',  
  25.     price : 42.50  
  26. }, {  
  27.     id : 1005,  
  28.     name : 'RESTful Web Services Cookbook中文版',  
  29.     price : 44.30  
  30. }]  
  31.   
  32. // 创建集合对象  
  33. var books = new Backbone.Collection(data, {  
  34.     model : Book  
  35. });  
  36.   
  37. // 根据id和cid查找模型对象  
  38. var book1 = books.get(1001);  
  39. var book2 = books.getByCid('c2');  
  40.   
  41. // 在控制台输出模型  
  42. console.dir(book1);  
  43. console.dir(book2);  

 

 

  本例中,我们从集合中根据模型的id和cid查找出2个模型对象,但实际开发中我们不会直接在代码中写出模型的id和cid。

 

  • id应该是从服务器接口进行同步获取到的。
  • cid应该是在之前已经记录下某个模型的cid,再根据它从集合中查找的。

 

 

  at()方法根据我们给定的索引,从集合中查找对应位置的模型,我们在上面的例子中追加以下代码:

 

Js代码   收藏代码
  1. // 根据索引查找模型对象  
  2. var book3 = books.at(1);  
  3.   
  4. // 在控制台输出模型  
  5. console.dir(book3);  
  6.   
  7.   最后,我们还可以通过where()方法,实现相对复杂的查找规则,例如:  
  8. // 根据price从集合中查找模型  
  9. var book4 = books.where({  
  10.     price : 51.80  
  11. });  
  12.   
  13. // 在控制台输出模型  
  14. console.dir(book4);  

 

 

  请查看控制台输出的结果:where()方法用于给定一个或多个数据,查找并返回集合中匹配数据的模型。该方法返回一个数组,因此能够包含一个或多个结果。

 

  当我们调用get()、getByCid()和at()方法没有找到到匹配对象时,会返回undefined,而where()方法在没有找到匹配对象时会返回一个空数组。你可以使用Underscore中的isEmpty()方法检查返回值是否为空,因为它能检查到空数组和空对象。

8.4 自动排序

  我们常常使用数组的sort()方法对元素进行排序,Underscore也提供了sortBy()方法实现更为复杂的集合排序。但在Backbone的集合对象中,为我们提供了集合元素的实时排序,当任何模型对象被插入到集合中时,都会按照预定的排序规则放到对应的位置。

 

Js代码   收藏代码
  1. // 定义模型类  
  2. var Book = Backbone.Model.extend({  
  3.     defaults : {  
  4.         name : '',  
  5.         price : 0  
  6.     }  
  7. });  
  8.   
  9. // 创建集合对象  
  10. var books = new Backbone.Collection(null, {  
  11.     model : Book,  
  12.     comparator : function(m1, m2) {  
  13.         var price1 = m1.get('price');  
  14.         var price2 = m2.get('price');  
  15.   
  16.         if(price1 > price2) {  
  17.             return 1;  
  18.         } else {  
  19.             return 0;  
  20.         }  
  21.     }  
  22. });  
  23.   
  24. books.add({  
  25.     name : '构建高性能Web站点',  
  26.     price : 56.30  
  27. });  
  28.   
  29. books.push({  
  30.     name : '深入分析Java Web技术内幕',  
  31.     price : 51.80  
  32. });  
  33.   
  34. books.unshift({  
  35.     name : '编写高质量代码:Web前端开发修炼之道',  
  36.     price : 36.80  
  37. });  
  38.   
  39. books.push({  
  40.     name : '基于MVC的JavaScript Web富应用开发',  
  41.     price : 42.50  
  42. }, {  
  43.     at : 1  
  44. });  
  45.   
  46. books.unshift({  
  47.     name : 'RESTful Web Services Cookbook中文版',  
  48.     price : 44.30  
  49.   
  50. }, {  
  51.     at : 2  
  52. });  
  53.   
  54. // 在控制台输出集合中的模型列表  
  55. console.dir(books.models);  

 

 

  这个例子和我们前面介绍添加方法时的例子相同,但集合中存储的模型顺序却不一样,因为我们在创建集合对象时设置了comparator方法。我们不需要手动调用该方法,因为它会在新模型被添加到集合中时自动被调用,并按照方法中定义的规则对集合中的数据进行重新排序。

  comparator方法接收两个参数,表示临近的两个模型对象,你需要通过返回值表示它们的排序规则,这和JavaScript中原生的sort()方法是一样的。

  当我们设置了comparator方法后,所有关于元素位置的方法和参数都会失效,例如push()、unshift()方法和at参数等。

 

  需要注意的是:comparator方法在很多时候都是非常有用的(例如显示动态数据列表时),因为它能保证我们获取到的数据始终都是按规则排列的,但在集合中的数据量太多时,它可能会耗费很多的资源和事件来实时确保数据的排序规则。这时,你可以手动调用集合对象的sort()方法在需要的进行手动排序。

8.5 从服务器获取集合数据

 

  • Collection也提供了两个与服务器进行交互的方法:
  • fetch():用于从服务器接口获取集合的初始化数据,覆盖或追加到集合列表中
  • create():在集合中创建一个新的模型,并将其同步到服务器

 

  我们先来看一个fetch()方法例子:

 

Js代码   收藏代码
  1. // 定义模型类  
  2. var Book = Backbone.Model.extend({  
  3.     defaults : {  
  4.         name : '',  
  5.         price : 0  
  6.     }  
  7. });  
  8.   
  9. // 定义集合类  
  10. var BookList = Backbone.Collection.extend({  
  11.     model : Book,  
  12.     url : '/service'  
  13. });  
  14.   
  15. // 创建集合对象, 并从服务器同步初始化数据  
  16. var books = new BookList();  
  17. books.fetch({  
  18.     success: function(collection, resp) {  
  19.         // 同步成功后在控制台输出集合中的模型列表  
  20.         console.dir(collection.models);  
  21.     }  
  22. });  

 

 

  我们前面讨论过模型的数据同步,需要与服务器同步数据,需要设置一个url或urlPath指定服务器接口地址。同步集合数据时也不例外,本例中我们设置服务器接口地址为/service,接口返回数据为:

 

Js代码   收藏代码
  1. [{  
  2.     "id" : "1001",  
  3.     "name" : "构建高性能Web站点",  
  4.     "price" : "56.30"  
  5. }, {  
  6.     "id" : "1002",  
  7.     "name" : "深入分析Java Web技术内幕",  
  8.     "price" : "51.80"  
  9. }, {  
  10.     "id" : "1003",  
  11.     "name" : "编写高质量代码:Web前端开发修炼之道",  
  12.     "price" : "36.80"  
  13. }, {  
  14.     "id" : "1004",  
  15.     "name" : "基于MVC的JavaScript Web富应用开发",  
  16.     "price" : "42.50"  
  17. }, {  
  18.     "id" : "1005",  
  19.     "name" : "RESTful Web Services Cookbook中文版",  
  20.     "price" : "44.30"  
  21. }]  

 

 

  我们在实例化集合对象之后,调用fetch()与服务器接口进行数据同步,并在同步成功后将集合中的数据列表输出在控制台。请运行例子中的代码,你能看到控制台中输出的结果,它包含5个模型对象,正是我们服务器接口返回的这些数据。

  在调用fetch()方法同步集合数据时,默认会以覆盖的方式进行,这意味着集合在同步之前的数据将丢失。我们可以在调用fetch()方法时传递add参数来通知集合进行添加,而不是覆盖,例如:

 

Js代码   收藏代码
  1. var books = new BookList();  
  2. books.add({  
  3.     id : 1000,  
  4.     name : 'Thinking in Java',  
  5.     price : 395.70  
  6. });  
  7.   
  8. books.fetch({  
  9.     add: true,  
  10.     success : function(collection, resp) {  
  11.         // 同步成功后在控制台输出集合中的模型列表  
  12.         console.dir(collection.models);  
  13.     }  
  14. });  

 

 

  我们修改了例子中的代码,在实例化集合对象后,我们向集合中添加了一条数据,然后从服务器同步了5条数据(请注意在调用fetch()方法时我们设置了add参数为true)。在控制台输出的结果中,之前的数据并没有被覆盖掉。

 

  数据在成功同步到集合中之后,会触发reset事件,我们可以通过监听该事件从而进行下一步操作(比如将集合中的数据显示到页面中)。

  集合的数据同步与模型的数据同步有许多相似之处(例如你可以重载parse()方法来对服务器返回的数据进行解析,使其能顺利被添加到集合中),这里就不再重复讨论。

 

  集合提供的另一个create()方法,是根据集合的model所指向的模型类,创建一个模型对象,并把该对象添加到集合中,最后将数据同步到服务器接口。

  我们通过例子来说明create()方法的使用:

 

Js代码   收藏代码
  1. var books = new BookList();  
  2. // 创建一个模型  
  3. books.create({  
  4.     name : 'Thinking in Java',  
  5.     price : 395.70  
  6. }, {  
  7.     success : function(model, resp) {  
  8.         // 添加成功后, 在控制台输出集合中的模型列表  
  9.         console.dir(books.models);  
  10.     }  
  11. });  

 

 

  请将这段代码替换到前面的例子中,并查看运行效果。

  (通过抓包我们能看到Request Method为POST,如果创建的模型中包含id,则Request   Method为PUT,这与我们之前讲模型的save()方法是相同的。)

  集合对象默认会先将模型添加到集合中,再提交到服务器接口,无论接口返回是否成功,新建的模型对象都会被添加到集合中。我们可以通过传递wait配置,来控制只有在服务器返回成功之后(响应状态码为200),才将模型对象添加到集合中。

  在Backbone内部,create()方法是通过add()方法将新创建的模型添加到集合中的,因此我们一般通过监听add事件,来对新模型进行下一步操作。

8.6 将数据批量同步到服务器

  上一节我们讨论过,Backbone中集合提供了数据同步和创建的方法与服务器进行交互,但实际上这可能并不能满足我们的需求。例如:当我们需要对数据进行批量地添加、修改和删除操作时,就需要在Collection的基础上扩展自己的方法。

  在下面的例子中,我扩展了对集合中的模型数据批量同步的方法:

 

Js代码   收藏代码
  1. // 定义模型类  
  2. var Book = Backbone.Model.extend({  
  3.     defaults : {  
  4.         name : '',  
  5.         price : 0  
  6.     }  
  7. });  
  8.   
  9. // 定义BookList类  
  10. var BookList = Backbone.Collection.extend({  
  11.     model : Book,  
  12.     url : '/service',  
  13.     // 将集合中所有的模型id连接为一个字符串并返回  
  14.     getIds : function() {  
  15.         return _(this.models).map(function(model) {  
  16.             return model.id;  
  17.         }).join(',');  
  18.     },  
  19.     // 将集合中所有模型提交到服务器接口  
  20.     createAll : function(options) {  
  21.         return Backbone.sync.call(this'create'this, options);  
  22.     },  
  23.     // 修改集合中的所有模型数据  
  24.     updateAll : function(options) {  
  25.         return Backbone.sync.call(this'update'this, options);  
  26.     },  
  27.     // 删除集合中所有的模型  
  28.     deleteAll : function(options) {  
  29.         var result = Backbone.sync.call(this'delete'this, _.extend({  
  30.             url : this.url + '/' + this.getIds()  
  31.         }, options));  
  32.         this.remove(this.models);  
  33.         return result;  
  34.     }  
  35. });  
  36.   
  37. // 创建集合对象  
  38. var books = new BookList();  
  39.   
  40. // 当集合触发reset事件时, 对数据进行批量同步  
  41. books.on('reset'function() {  
  42.     books.createAll();  
  43.     books.updateAll();  
  44.     books.deleteAll();  
  45. });  
  46.   
  47. // 从服务器接口同步默认数据  
  48. books.fetch();  

 

 

  来分析这个例子:

  我们定义了BookList集合类,并扩展了createAll()、updateAll()和deleteAll()方法(稍后我们再讨论这3些方法的作用)。

  然后我们实例化了一个BookList对象books,并监听了reset事件,reset事件会在从服务器同步数据成功之后被触发。

  接着我们调用fetch()方法从服务器接口获取默认数据(默认数据跟前面例子中返回的数据一致),获取成功后,reset事件的监听函数将被执行。

  我们可以在reset事件的监听函数中做许多的事情(例如写入业务逻辑),但这里为了更直观地演示,我直接调用books的自定义方法进行批量同步。

 

  首先调用的是createAll()方法,它将把当前集合中的所有数据同步到服务器接口,以Request   Method为POST方式告诉服务器接口创建并保存这些数据。

  在createAll()方法中,我们调用Backbone.sync()方法发送异步请求,请注意sync()方法的第2个参数,它是一个模型或集合对象,当操作为create或update时,在sync()方法内部会调用该对象的toJSON()方法,并将toJSON()方法的返回值作为Request   Payload请求数据发送到服务器接口。

  你可以通过抓包并分析请求信息,来更好地理解它。

  (toJSON()方法默认会返回模型或集合的数据对象,你可以通过重载该方法来自定义需要发送的请求数据)

 

  我们假设集合中的数据已经被用户批量修改过,所以我们通过updateAll()方法将最新的数据提交到服务器接口。

  updateAll()方法与createAll()方法几乎相同,它们的区别在于updateAll()方法在修改数据时传递给sync()方法的操作名为update而不是create,而发送给服务器的Request Method为PUT而不是POST。

 

  最后我们通过deleteAll()方法,通知服务器删除集合中的模型,并从本地集合对象中删除这些数据。

  deleteAll()方法与createAll()和updateAll()方法有些不同,因为deleteAll()方法发送给服务器的Request   Method为DELETE方式,这种方式下不能直接调用toJSON()方法将数据发送给接口,因此我们需要手动组装和发送数据。

  在本例中,我们定义了getIds()方法用于将集合中的所有模型的id连接起来,在deleteAll()方法中,我们调用sync()方法发送了Request Method为DELETE的请求,并在URL中将集合中的所有模型id传递给接口进行删除。

分享到:
评论

相关推荐

    backbone 入门指南

    ### Backbone.js入门指南知识点概述 #### 一、为什么需要Backbone.js? Backbone.js是一个轻量级的JavaScript库,它提供了MVC(Model-View-Controller)架构模式的基础实现,帮助开发者更好地组织复杂的Web应用...

    详解Backbone.js框架中的模型Model与其集合collection

    - 存储Model:Collection可以通过`add()`、`remove()`等方法添加、移除Model,或者通过`reset()`替换整个集合。 - 连接Model与View:Collection与View之间的交互通常通过监听事件来实现,例如当Collection中的...

    Backbone.js中的集合详解

    此外,模型和集合还提供了便利的与后端一起工作的方法,当数据发生变化时,可以自动化地标记Backbone.js视图。这样,它可以用于如下的情况: 代码如下: Model: Animal, Collection: Zoo 通常情况下你的集合只适应一...

    YOLOV5 改进实战项目【更换backbone为MobileNet】:大型海上图像目标检测数据集

    基于YOLOV5【更换backbone为MobileNet】对大型海上目标检测数据集的目标检测实战项目,包含代码、数据集、训练好的权重参数,经测试,代码可以直接使用 【数据集介绍】海上目标图像数据,类别:邮轮、小鸟、鱼、...

    backbone-model-collection-example

    在Backbone中,`Model`是数据和业务逻辑的核心,`Collection`则是一组相关模型的容器,它们共享相似的属性和行为。`Backbone.Model` 和 `Backbone.Collection` 的协同工作是Backbone框架中的关键组成部分,让我们...

    Backbone.js的集合

    在Backbone.js中,集合(Collections)是模型(Models)的有序集合,它们提供了一种组织和操作数据的高效方式。在本文中,我们将深入探讨Backbone.js集合的各个方面,包括其核心概念、功能、API以及在实际开发中的...

    详解Backbone.js框架中的模型Model与其集合collection_.docx

    在Backbone.js框架中,模型(Model)是数据和业务逻辑的核心载体,它与传统的MVC(Model-View-Controller)架构中的模型概念相似。Model主要用于存储应用中的数据,包括但不限于用户输入、服务器响应的数据,同时也...

    backbone-basic:基本视图、集合、模型设置

    总的来说,Backbone.js提供了一套强大的工具,帮助开发者组织JavaScript代码,实现数据模型与用户界面的双向绑定,从而构建出结构清晰、易于维护的Web应用。学习并熟练掌握Backbone的基本概念和用法,对于提升...

    YOLOV5 改进实战项目【更换backbone为Vgg】:大型海上图像目标检测数据集

    基于YOLOV5【更换backbone为Vgg】对大型海上目标检测数据集的目标检测实战项目,包含代码、数据集、训练好的权重参数,经测试,代码可以直接使用 【数据集介绍】海上目标图像数据,类别:邮轮、小鸟、鱼、帆船等共...

    resnet50、resnet101 backbone实现的FCN 图像语义分割模型、迁移学习

    resnet50、resnet101 backbone实现的FCN 图像语义分割模型、迁移学习;resnet50、resnet101 backbone实现的FCN 图像语义分割模型、迁移学习;resnet50、resnet101 backbone实现的FCN 图像语义分割模型、迁移学习;...

    backbone-live:骨干现场模型和收藏

    它通过从服务器捕获 Pusher 事件来使您的模型和集合始终保持最新状态。 它还遵循“约定优于配置”的思想,并规定了应该与 Pusher 事件一起使用的事件名称,以减少所需的代码量。 如果您不想使用 Pusher,它将无法...

    backbone_fetch_retry:主干模型集合的 FetchRetry Mixin

    在JavaScript的世界里,Backbone.js是一个著名的轻量级MVC(模型-视图-控制器)库,它提供了数据模型、集合、视图以及路由器等核心功能,帮助开发者构建可维护的前端应用。"backbone_fetch_retry"是针对Backbone.js...

    Java 演示 backbone 基本用法

    3. **Backbone.Collection**: Collection是Model的集合,它扩展自Array对象,提供了对一组数据进行操作的功能,如排序、过滤等。Collection也拥有自己的Model事件,当集合中的某个模型发生变化时,可以触发相应事件...

    backbone.collectionview:Backbone 的高效集合视图

    在Backbone.js这个轻量级的MVC框架中,CollectionView是一个强大的工具,它极大地提高了开发者处理数据集合的效率。在JavaScript开发中,Backbone.CollectionView是Backbone.js库的一个扩展,用于有效地渲染和管理...

    backbone-example:BackboneJS示例代码

    1. **模型(Model)**:Backbone中的模型类似于MVC架构中的模型层,它封装了数据和业务逻辑。在示例中,你可能会看到如何定义模型、如何设置和获取属性,以及如何监听属性变化事件。 2. **视图(View)**:视图负责...

    backbone.js入门教程

    - **Collections**:Collections 是一组模型的容器,提供了丰富的 API 来操作这些模型集合,例如添加、删除、排序等操作。 - **Views**:Views 负责渲染模型的数据并响应用户的交互。通过 Views 可以将模型绑定到 ...

    Backbone 文档

    Backbone.js 是一款轻量级的JavaScript库,用于构建客户端的Web应用,它提供了一种组织和管理前端数据模型、视图以及与服务器交互的结构。这个文档将带你走进Backbone的世界,通过一个开发入门的例子,帮助你了解...

    backbone.datatableview:Backbone 集合的简单 CRUD 界面

    排序搜索分页用法要使用 Backbone.DataTableView 你只需要提供Backbone.Collection如果集合已经包含模型如果不是那么它执行Backbone.DataTableView将使用它们fetch从服务器获取模型。 DataTables aaColumnDefs对于...

    backbone教程

    Backbone.Collection是一个保存模型的集合类,提供了许多工具方法,例如增加元素、删除元素、获取长度、排序、比较等。集合类可以从服务器端获取初始值,并可以对每个模型进行增加、删除等操作。 Views(视图) ...

Global site tag (gtag.js) - Google Analytics