Meteor开发平台入门 互动版

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

反应式数据集 - LocalCollection

如果在前端需要比字典更强大的反应式数据,那么可以使用Meteor的minimongo 包,它是一个使用JavaScript实现的内存数据库,遵循了MongoDB的API访问接口。 我们需要手工引入这个minimongo包:

~/test$ meteor add minimongo↵

实例化minimongo包中定义的类LocalCollection,我们就得一个本地数据集, ,可以执行插入、删除、修改、查找等CRUD操作,具体的使用方法可参考对应的 MongoDB文档:

//创建本地集合
var msgs = new LocalCollection("messages");
//插入 - Create
msgs.insert({name:"john",message:"who are you?",time:Date.now()});
//查找 - Retrieve
msgs.find({name:"john"});
//更新 - Update
msgs.update({name:"john"},{$set:{time:Date.now()}});
//删除 - Delete
msgs.remove({name:john});

LocalCollection对象最重要的特性是,它是一个反应式对象。可以这样理解, insert/update/delete这些方法相当于数据集的setter,而find方法,则相 当于数据集的getter。因此,依赖于本地数据集的计算过程,可以使用 Tracker.autorun()方法启动为响应式计算:

var msgs = new LocalCollection("messages");
Tracker.autorun(function(){
  var $msgs = $("#messages").html("");
  msgs.find().forEach(function(msg){
    var tpl = "<div><span>$1:</span>$2</div>".replace(/\$1/,msg.name).replace(/\$2/,msg.message);
    $msgs.append(tpl);
  });
});

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

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

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

~/test$ cp ~/demos/frp-minimongo/* .↵ ~/test$ meteor add monimongo↵ ~/test$ meteor↵

理解并修改frp-minimongo示例代码,通过练习掌握在Meteor应用中如何使用 Tracker和LocalCollection来建立反应式计算。