在添加,删除,重置,更新,排序集合里面的模型的时候,都会触发相应的事件。我们可以在集合的 initialize 方法里面,去监听这些事件,当发生这些事件的时候,去做一些事情。下面,我们来看几个跟集合相关的事件。
在这个集合里面,先添加一个 initialize 方法 ...
然后,使用 on 方法,去监听这些事件... this.on ,表示为当前的这个集合对象去监听事件 ... 可以分别去监听这些事件 ... 也可以这样 ... 给这个 on 方法一个对象 ...
对象里的东西就是要监听的事件,还有处理这个事件用到的方法 ...
this.on({})
先去监听一下 add 事件 ... 在添加新的模型到集合里的时候,会触发这个事件 ... 处理这个事件的函数可以接受三个参数,第一个参数是被添加的模型,第二个参数是集合,第三个参数是一个选项 ...
这个事情发生的时候,可以在管制台上输出点文字 ... 这里的 model.id 可以输出被添加的模型的 id 号 ...
'add': function(model, collection, options) {
console.log('ID: ' + model.id + ' 模型添加到了集合里');
},
用一个逗号分隔一下 .. 然后继续去设置其它要监听的事件 .. 再添加一个 remove 事件 ... 把模型从集合里移除掉的时候,会触发这个事件。
处理这个事件的函数同样授受三个参数 ... 模型,集合,还有选项 ... 发生这个事件的时候,也在控制台上输出点文字 ...
'remove': function(model, collection, options) {
console.log('ID: ' + model.id + ' 模型从集合里删除掉了');
},
最后,我们再去监听一个 change 事件 ... 当集合里面的模型发生变化的时候,比如更改了某个模型里的属性的值,就会在这个集合上触发一个 change 事件 ...
处理这个事件的函数接受两个参数,model ,还有 options ... 发生这个事件的时候,在控制台上显示 集合里的模型发生了变化 ...
演示
保存 ... 再去浏览器上试试这些事件 ... 打开控制台 ... 然后新建一个空白的集合 ...
var noteCollection = new NoteCollection()
再用 add 方法去给它添加几个模型 ...
noteCollection.add([note1, note2, note3])
添加模型到集合里,会触发 add 事件,所以在控制台上,会显示,添加了这些模型的提示信息。
再试一下移动模型发生的事件 ..
noteCollection.remove([note2, note3])
移除的时候会发生 remove 事件,在控制台上也会出现提示 ...
最后再试一下 change 事件 ... 我们可以去修改一下在集合里的 note1 这个模型的标题 ... 使用 add 方法 ..
要修改的模型的 id 是 1 ,再设置一下新的标题 ... 然后再把 merge 参数设置成 true
noteCollection.add({id: 1, title: '今天天气不错'}, {merge: true})
回车 ...
因为我们在定义 Note 这个模型的时候,也监听了一些事件 ... 所以在这里会显示一些提示 ...
最后这个 集合里的模型发生了变化 ,是我们在集合里监听的 change 事件要显示的提示内容 ...