您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

Backbone.js中的集合详解_其它

2024/11/23 23:17:14发布27次查看
backbone.js的集合只是一个简单的有序集的模型。通过适应模型和集合,我们可以避免数据处理逻辑放到了我们的视图层。此外,模型和集合还提供了便利的与后端一起工作的方法,当数据发生变化时,可以自动化地标记backbone.js视图。这样,它可以用于如下的情况:
复制代码 代码如下:
model: animal, collection: zoo
通常情况下你的集合只适应一种模型,但模型本身并不局限于集合的类型。
复制代码 代码如下:
model: person, collection: office
model: person, collection: home
下面是常见的模型/集合的例子:
复制代码 代码如下:
var music = backbone.model.extend({
      initialize: function(){
          console.log(welcome to the music world);
      }
});
var album = backbone.collection.extend({
    model: music
});
上面的代码告诉我们如何创建集合。但是它没有告诉我们用数据操纵集合的过程。因此,让我们探索这个过程:
复制代码 代码如下:
var music = backbone.model.extend({
        defaults: {
            name: not specified,
            artist: not specified
        },
        initialize: function(){
            console.log(welcome to the music world );    }
    });
    var album = backbone.collection.extend({
        model: music
    });
    var music1 = new music ({ id: 1 ,name: how bizarre, artist: omc });
    var music 2 = new music ({id: 2,  name: what hurts the most, artist: “rascal flatts });
    var myalbum = new album([music 1, music 2]);
    console.log( myalbum.models );
下面我们来看看backbone.js的集合和其它组件的关系:
一、添加模型到集合
正如我们所知的那样,集合是模型的集合。因此,我们可以在集合上添加模型。要添加模型到集合,我们可以使用add方法。我们还可以添加模型到集合的开始——通过使用unshift方法。
复制代码 代码如下:
var music3 = new music({ id: 3, name: yes i do,artist:“rascal flatts  });
music.add(music3);
console.log('new song added');
console.log(json.stringify(music));
二、从集合中移除模型很多时候,我们会有从集合中移除一些指定的数据这样的需求。要从集合中移除模型,我们需要提供模型的id。如果我们想用一个完整的新数据集替换原集合,我们可以使用reset方法。
复制代码 代码如下:
music.remove(1);
console.log('how bizarre removed...');
console.log(json.stringify(music));
三、get和set
如果我们需要从代码其它地方的集合中获取一个值,那么可以直接使用get方法。此时,我们向带检索的模型传递id值。
复制代码 代码如下:
console.log(json.stringify(music.get(2)));
集合的set方法有一个有趣的实现。set方法通过传递模型列表,执行集合的“智能”更新。如果列表中的模型还不在集合中,那么会添加到集合。如果模型已经在集合中,那么它的属性会被合并。如果集合包含了不属于列表的任意模型,那么这项模型会被移除。
复制代码 代码如下:
var music = backbone.model.extend({
        // this attribute should be set as a default
        defaults: {
            name: ''
        },
        // set the id attribute so that the collection        
        idattribute: 'id'
    });
    var song = backbone.collection.extend({
        model: music
    });
    var models = [{
        name: 'omc',
        id: 1
    }, {
        name: 'flatts',
        id: 2
    }];
    var collection = new song(models);
    collection.bind('add', function (model) {
        alert('addb')
    });
    collection.bind('remove', function () {
        alert('add')
    });
    models = [{
        name: 'omc',
        id :1
    }, {
        name: 'flatts',
        id: 2
    }, {
        name: ' jackson ',
        id: 3
    }];
    collection.add(models);
});
正如我们在上面所看到的那样,事前我们已经有2个模型了,当我们添加第3个模型时,早先的模型保持不变。四、构造器与初始化
当我们创建一个集合时,我们可以传递模型的初始化数组。集合的比较器可以作为一个选项被加入。如果传递的比较器选项是false,那么会阻止排序。如果我们定义了一个初始化函数,那么此函数会在集合创建时被调用。下面说明了几个选项,如果提供了,会直接加到集合上:模型和比较器。
复制代码 代码如下:
var tabs = new tabset([tab1, tab2, tab3]);
var spaces = new backbone.collection([], {
  model: space
});
五、tojson
tojso方法返回集合中包含哈每个模型哈希属性的数组。此方法通常用于对集合整体做序列化和持久化。
复制代码 代码如下:
var song = new backbone.collection([
  {name: flatts},
  {name: omc},
  {name: jackson}
]);
alert(json.stringify(song));
六、比较器comparator
默认情况下,集合是不带比较器的。如果我们定义了一个比较器,它可以用于让集合维持某种排序。这意味着在添加模型时,模型会被插入到集合中适合的位置。比较器可以用sortby定义,或以字符串的方式指示排序的属性。
sortby比较器函数得到一个模型,并返回一个数字或字符串。
sort比较器函数得到两个模型,如果第一个模型先于第二个模型,那么返回-1;如果两个模型同级,那么返回0;如果第二个模型先于第一个模型,那么返回1。
下面我们来看看例子:
复制代码 代码如下:
var student  = backbone.model;
var students = new backbone.collection;
students.comparator = 'name';
students.add(new student({name: name1, roll: 9}));
students.add(new student({name: name2, roll: 5}));
students.add(new student({name: name3, roll: 1}));
alert(students.pluck('roll'));
待比较器的集合不会自动重排序,即使我们修改了模型的属性。因此我们应该在修改了模型属性后估计会影响到排序时,调用排序。七、排序
当集合中添加模型时,应强制集合进行重新排序。当集合添加模型时要禁用排序,可以传递{sort: false}参数。调用排序的触发器会检查此参数。
复制代码 代码如下:
sortbytype: function(type) {
  this.sortkey = type;
  this.sort();
}
以及视图函数:
复制代码 代码如下:
sortthingsbycolumn: function(event) {
  var type = event.currenttarget.classlist[0]
  this.collections.things.sortbytype(type)
  this.render()
}
八、采摘pluck:从集合中的每个模型采摘一个属性,这等同于从迭代器调用map并返回单一属性。
复制代码 代码如下:
var song = new backbone.collection([
  {name: flatts},
  {name: omc},
  {name: jackson}
]);
var names = songs.pluck(name);
alert(json.stringify(names));
九、wherewhere:返回集合中所有匹配传递的属性的模型的数组,使用了过滤器。
复制代码 代码如下:
var song = new backbone.collection([
  {name: yes i do,      artist: flatts},
  {name: how bizarre,    artist: how bizarre},
  {name: what hurts the most,     artist: flatts},
  ]);
var artists = song.where({artist: flatts});
alert(artists.length);
十、url
在集合中设置url属性,会引用服务器的位置。集合内的模型会使用此url来构造自己的url。
复制代码 代码如下:
var songs = backbone.collection.extend({
  url: '/songs'
});
var songs = backbone.collection.extend({
  url: function() {
    return this.document.url() + '/songs';
  }
});
十一、解析
parse:在提取fetch时被backbone调用,无论服务器是否返回集合的模型。此函数会传递原始的响应对象,他应该返回被添加到集合的模型属性的数组。默认的实现是空操作no-op。简单的通过json响应传递,用先前存在的api覆盖此操作,或更好的命名空间响应。
复制代码 代码如下:
var songs = backbone.collection.extend({
    parse: function(response) {
    return response.results;
  }
});
十二、提取
fetch:从服务器提取集合默认的模型集,当取回后在集合中设置它们。此选项哈希接受success或错误回调,他传递(集合、响应、选项)三个参数。然后从服务器返回模型数据。它用于设置合并提取的模型。
复制代码 代码如下:
backbone.sync = function(method, model) {
  alert(method + : + model.url);
};
var songs = new backbone.collection;
songs.url = '/songs';
songs.fetch();
正如上面所看到的,仅仅是backbone的集合就有那么多的方法,掌握它们才能提高代码的质量。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product