LOGOSan

事件处理

编辑本文

事件是开发中最常用的行为管理方式。通过 on- 前缀,可以将事件的处理绑定到组件的方法上。

提示:在 San 中,无论是 DOM 事件还是组件的自定义事件,都通过 on- 前缀绑定,没有语法区分。

DOM 事件

on- + 事件名 将 DOM 元素的事件绑定到组件方法上。当 DOM 事件触发时,组件方法将被调用,this 指向组件实例。下面的例子中,当按钮被点击时,组件的 submit 方法被调用。

1
2
3
4
5
6
7
8
9
10
11
12
san.defineComponent({
template: '...<button type="button" on-click="submit">submit</button>',
submit: function () {
var title = this.data.get('title');
if (!title) {
return;
}
sendData({title: title});
}
});

绑定事件时,可以指定参数,引用当前渲染环境中的数据。参数可以是任何类型的表达式

1
2
3
4
5
6
7
8
<!-- Template -->
<ul>
<li s-for="item, index in todos">
<h3>{{ item.title }}</h3>
<p>{{ item.desc }}</p>
<i class="fa fa-trash-o" on-click="rmTodo(item)"></i>
</li>
</ul>
1
2
3
4
5
6
7
// Component
san.defineComponent({
rmTodo: function (todo) {
service.rmTodo(todo.id);
this.data.remove('todos', todo);
}
});

指定参数时,$event 是 San 保留的一个特殊变量,指定 $event 将引用到 DOM Event 对象。从而你可以拿到事件触发的 DOM 对象、鼠标事件的鼠标位置等事件信息。

1
2
3
4
5
6
7
san.defineComponent({
template: '<button type="button" on-click="clicker($event)">click here</button>',
clicker: function (e) {
alert(e.target.tagName); // BUTTON
}
});

自定义事件

在 WebComponents-like 的组件体系下,每个组件具有一个根元素,所以通过 on- + 事件名 我们可以为组件的根元素绑定 DOM 事件处理,也可以为组件绑定自定义事件处理。

下面的例子中,MyComponent 为 Label 组件绑定了 done 事件的处理方法。组件事件的绑定语法与 DOM 事件绑定完全相同。

1
2
3
4
5
6
7
8
9
10
11
var MyComponent = san.defineComponent({
components: {
'ui-label': Label
},
template: '<div><ui-label bind-text="name" on-done="labelDone($event)"></ui-label></div>',
labelDone: function (doneMsg) {
alert(doneMsg);
}
});

San 的组件体系提供了事件功能,Label 直接通过调用 fire 方法就能方便地派发一个事件。

1
2
3
4
5
6
7
var Label = san.defineComponent({
template: '<template class="ui-label" title="{{text}}">{{text}}</template>',
attached: function () {
this.fire('done', this.data.get('text') + ' done');
}
});

额外提示:在组件中,由于 on- 能绑定组件根元素事件与组件自定义事件,所以组件开发者在设计自定义事件时,事件名不能和 DOM 事件名相同,否则可能导致不可预测的后果。

RESOURCES

教程

教程是入门的捷径,请从这里开始了解San。

指南

我们正在编写指南手册,以指导各种应用场景下怎么使用San。

示例

这里展示了一些简单例子,以及在实际项目如何使用San。

组件 API

当你想不起来组件的接口时,请查阅这里。

FACILITIES

Router

支持hash和html5模式的router,单页或同构的Web应用通常需要它。

Store

应用状态管理套件,其理念是类似flux的单向流。

Update

Immutable的对象更新库,和san-store配合进行应用状态数据更新。

MaterialUI组件库

基于material-design设计规范的组件库