Meteor开发平台入门 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

反应式字典 - ReactiveDict

ReactiveVar可以对单个数据进行响应式封装。不过有时我们希望对多个数据 构成的数据集统一进行封装,希望其中任何一个数据的变化都将传播给所有 依赖于这个数据集的计算过程。

Meteor提供了reactive-dict包来支持这样的需求,ReactiveDict类使用 键/key来标识数据集中不同的数据。和reactive-var包一样,我们需要为 应用手工添加这个包:

~/test$ meteor add reactive-dict↵

我们之前接触到的Session对象,就是一个ReactiveDict实例。

≡ 创建反应式字典 - new ReactiveDict(dictName)

使用new操作符实例化ReactiveDict类,我们就获得了一个反应式字典:

var dict = new ReactiveDict();
//可选的,可以在构造函数中设置字典名称
var dict2 = new ReactiveDict("contacts");

≡ 反应式字典读写 - 内置的getter/setter方法

很明显,反应式字典的getter/setter需要指定键/key - 它相当于数据 集中的变量名。

//初始化Kongka的数据
dict.setDefault("Konka","18611111111");
//读取Konka的数据
var tel = dict.get("Konka");
//需改Linda的数据
dict.set("Linda","13901234567");

≡ 初始化 - setDefault()

除了set(key,newVal)方法,反应式字典还提供了一个额外的setDefault(key,newVal) 方法,它仅仅用于对字典中指定键数据的初始化,也就是说,如果字典中指定的键已经存在, 那么它什么也不做,否则,就调用set(key,newVal)设置值:

//初始化,ok
dict.setDefault("Konka","18611111111");
//再次初始化,没用啦
dict.setDefault("Konka","18622222222");
//tel值 : 18611111111
var tel = dict.get("Konka");

执行以下命令复位test应用、删除源文件:

~/test$ meteor reset↵ ~/test$ rm -rf \*↵

执行以下命令拷贝frp-reactivedict示例代码、添加reactive-dict包、 运行并查看运行结果:

~/test$ cp ~/demos/frp-reactivedict/* .↵ ~/test$ meteor add reactive-dict↵ ~/test$ meteor↵

理解并修改frp-reactivedict示例代码,通过练习掌握在Meteor应用中如何使用 Tracker和ReactiveDict实现反应式计算。