名词解释
监听器
事件的监听 **函数**。实际上在 Roof 内部,监听器并不是一个函数,而是一个对象,这个对象包含了触发事件时要执行的函数。还包含了函数触发时机的控制信息。
流程控制信息
如上所说,流程控制信息是监听器的一部分。在实际的项目中,某个事件可能有多个监听器,监听器的触发顺序是有一定逻辑的。那么就需要提供监听器的流程控制信息,来告诉Roof以何种顺序执行监听器。流程控制信息本质上只是几个参数,如`before`、`after`、`first`、`last`等等。
应用事件
Roof 的事件概念类似于 Flux 中的 Action。不过更简单易用。在 Roof 中,全局只有一个事件对象实例。任何视图组件都可以平等地获得这个实例,然后通过它来触发相应的事件。我们以 **创建一条TODO** 的操作为例。
首先在输入框的组件的代码中:
javascript
var Todo = require("../../data/type/todo").Node
var Mixin = require("../../../../src/mixin/react")
var Util = Mixin.util
//获得全局唯一事件对象实例
var bus = require("../../events")
//newTodo 用来保存输入框中的值
var newTodo = new Todo()
var todoMixin = new Mixin({todo:newTodo},{cursors:{"todo":"todo"}})
var Index = React.createClass({
mixins : [todoMixin],
onKeyUp : function(e){
var todo = this.cursors.todo
if( e.keyCode === 13 ){
//触发事件,得到一个 promise
bus.fire("todo.create", todo ).then(function(){
todo.set("content","")
},function(res){
alert("创建失败:"+res.data)
})
}
},
render() {
var todo = this.cursors.todo
return (
<div>
<input value={todo.get("content")} onChange={Util.handleFormChange.bind(this,todo,"content")} onKeyUp={this.onKeyUp}/>
<div></div>
</div>
)
}
})
Roof 的事件对象实例推荐叫做 `bus`,总线的意思。我们通过 `bus.fire` 这个方法来触发事件。它可以传任意的参数,监听此事件的函数会按同样顺序收到这个参数。监听事件的函数统一称为 **监听器**。
然后我们在一个单独的文件中监听这个事件
javascript
// /events/todo.js
// 获得全局共享的数据
var localTodos = require("../data").source.asCreatorTodos
module.exports = function(bus){
bus.on("todo.create", function createTodo(todo){
//往服务器端发送请求
return todo.push()
})
bus.on("todo.create", function updateLocalTodos(todo){
//插入新数据
//注意,这里的 todo 和 input 组件中 todo 是同一个引用
//所以我们通过 .toObject 方法来丢掉引用。
localTodos.insert(todo.toObject())
}
}
到这里,一个 **发送事件** -- **处理事件** -- **更新数据** 的回路就全部完成了。