LOGOSan

样式

编辑本文

样式处理是编写视图模板时常见的场景,涉及到的 attribute 有 class 和 style,它们的处理方式和其他元素 attribute 有一些区别。本文专门描述样式处理上常见的场景。

在开始前,先强调一下:San 并没有为 class 和 style 处理提供特殊的绑定语法,他们的处理与其它 attribute 方式一样。

class

我们可能会设计一些用于表示状态的 class,这些 class 是否应该被添加到元素上,取决于某些数据的值。一个简单的场景是下拉列表的收起和展开状态切换。

1
2
3
4
5
<!-- template -->
<div>
<button on-click="toggle"></button>
<ul class="list{{isHidden ? ' list-hidden' : ''}}">...</ul>
</div>
1
2
3
4
5
6
7
// Component
san.defineComponent({
toggle: function () {
var isHidden = this.data.get('isHidden');
this.data.set('isHidden', !isHidden);
}
});

上面的例子中,isHidden 数据为真时,ul 具有 list-hidden 的 class,为假时不具有。

San 在设计时,希望视图模板开发者像写正常的 attribute 一样编写 class 与 style,所以没有提供特殊的绑定语法。通过三元运算符的支持可以处理这样的场景。

下面例子是一个根据状态不同,切换不同 class 的场景。

1
<ul class="list {{isHidden ? 'list-hidden' : 'list-visible'}}">...</ul>

style

对 style 的处理通常没有 class 那么复杂。我们很少会把样式信息写在数据中,但有时我们期望用户能定制一些界面样式,这个时候样式可能来源于数据。

1
2
3
4
5
6
7
8
<ul>
<li
s-for="item, index in datasource"
style="background: {{item.color}}"
class="{{item.id == value ? 'selected' : ''}}"
on-click="itemClick(index)"
>{{ item.title }}</li>
</ul>

此时需要警惕的是,数据可能并不存在,导致你设置的 style 并不是一个合法的样式。如果你不能保证数据一定有值,需要把样式名包含在插值中。

1
2
3
4
5
6
7
8
<ul>
<li
s-for="item, index in datasource"
style="{{item.color ? 'background:' + item.color : ''}}"
class="{{item.id == value ? 'selected' : ''}}"
on-click="itemClick(index)"
>{{ item.title }}</li>
</ul>

RESOURCES

教程

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

指南

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

示例

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

组件 API

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

FACILITIES

Router

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

Store

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

Update

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

MaterialUI组件库

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