利用自定义事件

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

下面打开应用的视图,在这里,可以去监听一下地址发生变化的时候,在集合里面发生的一个自定义的事件 .. 这个事件就是 filter ...

在视图的初始化的方法里面,使用视图的 listenTo 这个方法 . ... 这个事件是发生在集合上面的 ... 用一个 app.todoList ... 表示应用的集合 ... 再指定一下要监听的事件的名字 ... 就是 filter ...

这个事件发生以后 .. 去执行一下这个视图里的 filterAll 这个方法 ...

this.listenTo(app.todoList, 'filter', this.filterAll);

在下面, 我们再去定义一下这个方法 ...

filterAll : function () {
app.todoList.each(this.filterOne, this);
},

在这个方法里面,可以去集合里的每一个项目都去应用一个方法 ... 这里,可以使用 Underscore 里的 each 这个方法 ...

用 filterOne 这个方法,去处理一下 ... 每个项目 .. 再设置一下这个方法的上下文 ... 用一个 this ...

在它上面,再去定义这个 filterOne 这个方法 ... 可以把要处理的单个任务项目交给这个方法 ... 用 todo 来表示 .. 在这个方法里面,我们再用一下 trigger 方法,在模型上面,去触发一个自定义的事件 .. 这个事件叫做 visible ...

filterOne : function (todo) {
todo.trigger('visible');
},

模型视图

下面, 我们再到模型的视图里面,去监听这个发生在模型上的 visible 这个自定义的事件 ... 打开 TodoView.js ..

在初始化的方法里 ... 用视图的 listenTo 这个方法 ... 事件是发生在跟这个视图相关的模型上的 ... 用 this.model 来表示 ..

监听的事件是 visible ... 事件先生以后,用 toggleVisible 这个方法去处理一下 ...

在下面,再去定义这个方法 ...

toggleVisible: function() {}

这个方法要做的事儿,就是去为相应的项目添加 hidden 这个 css 类 ... 用 this.$el ,表示当前的视图的 el 元素 ... 调用 jQuery 的 toggleClass 这个方法 ... 它可以切换在元素上面的 css 类 ... 要切换的 css 类是 hidden ...

然后我们要给这个方法一个开关 ... 如果这个开关返回的是 true ,就在元素上添加 hidden 这个类 ... 如果开关返回的是 false .. 就在元素上去掉 hidden 这个类 ..

this.$el.toggleClass( 'hidden', this.isHidden());

这个开关,我们可以再用一个方法去返回值 ... 在这个方法里,我们需要用到一些逻辑运算符,在下面的视频里,我们再一起来看一下 ...

1:52
0:00
6:36
3:22
3:42
0:00
2:29
4:08

利用自定义事件《 Backbone 应用实例 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点