LOGOSan

数组深层更新如何触发视图更新?

编辑本文

在 san 组件中,对数据的变更需要通过setsplice 等方法,实现用最简单的方式,解决兼容性的问题,同时为了保证数据操作的过程可控,san 的数据变更在内部是 Immutable 的,因此遇到数组深层做数据交换时直接 set 数据会发现没有触发视图的更新

场景描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
class MyApp extends san.Component {
static template = `
<div>
<div
style="cursor: pointer"
on-click="handlerClick($event)">点我交换数据</div>
<ul>
<li s-for="item in list">{{item.title}}</li>
</ul>
</div>
`;
initData() {
return {
list: [
{
title: 'test1'
},
{
title: 'test2'
}
]
};
}
handlerClick() {
// 想交换两个值
let firstNews = this.data.get('list');
let firstData = firstNews[0];
let secondData = firstNews[1];
firstNews[1] = firstData;
firstNews[0] = secondData;
// 在这里直接set数据发现并没有触发视图的更新
this.data.set('list', firstNews);
}
}
let myApp = new MyApp();
myApp.attach(document.body);

原因分析

san 的 data 的数据是 Immutable 的,因此 set firstNews 时变量的引用没变, diff 的时候还是相等的,不会触发更新。

解决方式如下

See the Pen
数组深层更新触发视图更新
by solvan(@sw811) on
CodePen.

RESOURCES

教程

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

指南

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

示例

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

组件 API

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

FACILITIES

Router

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

Store

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

Update

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

MaterialUI组件库

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