LOGOSan

循环

编辑本文

通过循环渲染列表是常见的场景。通过在元素上作用 s-for 指令,我们可以渲染一个列表。

语法

s-for 指令的语法形式如下:

1
item-identifier[, index-identifier] in expression

列表渲染

下面的代码描述了在元素上作用 s-for 指令,渲染一个列表。在列表渲染的元素内部,可以正常访问到 owner 组件上的其他数据(下面例子中的dept)。

1
2
3
4
5
<!-- Template -->
<dl>
<dt>name - email</dt>
<dd s-for="p in persons" title="{{p.name}}">{{p.name}}({{dept}}) - {{p.email}}</dd>
</dl>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Component
san.defineComponent({
// template
initData: function () {
return {
dept: 'ssg',
persons: [
{name: 'errorrik', email: 'errorrik@gmail.com'},
{name: 'otakustay', email: 'otakustay@gmail.com'}
]
};
}
});

索引

s-for 指令中可以指定索引变量名(下面例子中的index),从而在列表渲染过程获得列表元素的索引。

1
2
3
4
5
<!-- Template -->
<dl>
<dt>name - email</dt>
<dd s-for="p, index in persons" title="{{p.name}}">{{index + 1}}. {{p.name}}({{dept}}) - {{p.email}}</dd>
</dl>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Component
san.defineComponent({
// template
initData: function () {
return {
dept: 'ssg',
persons: [
{name: 'errorrik', email: 'errorrik@gmail.com'},
{name: 'otakustay', email: 'otakustay@gmail.com'}
]
};
}
});

列表数据操作

列表数据的增加、删除等操作请使用组件 data 提供的数组方法。详细请参考数组方法文档。

RESOURCES

教程

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

指南

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

示例

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

组件 API

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

FACILITIES

Router

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

Store

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

Update

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

MaterialUI组件库

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