LOGOSan

如何遍历一个对象?

编辑本文

在San中已经提供了 san-for 指令(可以简写为 s-for )将 Array 渲染为页面中的列表,那么对于 Object 想要进行遍历并渲染应当怎么做呢?由于 San 的指令并不直接支持 Object 的遍历,因此可以使用计算属性进行对象的遍历

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
class MyComponent extends San.component {
static computed = {
list() {
let myObject = this.data.get('myObject');
return Object.keys(myObject).map(item => {
return {
key: item,
value: myObject[item]
}
});
}
};
}

示例

See the Pen san-traverse-object by liuchaofan (@asd123freedom) on CodePen.

RESOURCES

教程

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

指南

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

示例

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

组件 API

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

FACILITIES

Router

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

Store

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

Update

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

MaterialUI组件库

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