翻译 Meteor React 制作 Todos - 03 - 集合

Scott 发布于2019-08-21 10:43 / 1536人阅读

摘要：数据存储集合是存储持久化数据的方式。中的集合比较特殊的是，它可以从服务端，包括客户端接收数据。它也可以自动的自我更新，因此一个视图组件受到一个集合的支持，他可以自动的展示最新的数据。

数据存储

集合(Collection)是Meteor存储持久化数据的方式。Meteor 中的集合比较特殊的是，它可以从服务端，包括客户端接收数据。这使得编写视图逻辑变得更加简单 -- 不用去写太多的服务端的代码。它也可以自动的自我更新，因此一个视图组件受到一个集合的支持，他可以自动的展示最新的数据。

创建一个新的集合和在你的JavaScript中调用MyCollection = new Mongo.Collection("my-collection");一样容易。

在服务端，这些设置调用一个叫my-collection的MongoDB的集合；在客户端它创建了一个和服务端集合的缓存链接。

我们将会在第十二步学到更多，但是现在，我们还是写我们所制定的代码，将整个数据库持久化到客户端。

添加一行代码去定义我们的第一个集合

在simple-todos-react.jsx中的第一行加入这么一段

// 写在第一行
// 定义一个集合来支撑我们的任务列表
Tasks = new Mongo.Collection("tasks");

使用来自（数据库）集合的数据替换React组件中的数据

使用来自Meteor中的数据来替换React组件中的数据，需要在React组件中包含ReactMeteorData的mixin，在你的组件中带着这样的一个Minin你就可以定义一个叫做getMeteorData的方法，这个方法定义了如何跟踪数据的改变。这个你从getMeteorData中返回的对象可以传递到render中的this.data。现在来试试。

在App.jsx中修改一些部分

// App component - represents the whole app
App = React.createClass({
 
     // 修改内容起始
  // 这个mixin使得getMeteorData方法可以使用
  mixins: [ReactMeteorData],
 
  // 从Tasks集合中获取数据并添加到this.data中
  getMeteorData() {
    return {
      tasks: Tasks.find({}).fetch()
    }
  },
  // 修改内容结束
 
  renderTasks() {
    // 从this.data中获取数据
    return this.data.tasks.map((task) => {
      return ;
    });
  },

当你改变了这些代码的时候，你可能会注意到（浏览器上）那些在todo list上的人物会消失。这是因为我们的数据库到现在是空的 -- 我们得写入一点任务（数据）

通过命令行添加数据

在集合中的子项被叫做文档(documents), 蓝使用服务端的数据库命令行插入一些文档到我们的集合中吧！在一个新的终端窗口上，进入应用程序的目录并输入这样的命令：

meteor mongo

这就进入了你的应用程序的本地开发数据库，在提示框中输入这样的命令：

db.tasks.insert({ text: "Hello world!", createdAt: new Date() });

现在在你的浏览器中，你将会看到你的应用程序立刻更新了界面并展示了新的任务（数据）。你应该能够明白我们并没有写入任何的连接到服务器端数据库的前端代码 -- 他就是这么自动的进行了！

再向数据库命令行中插入几条不同的数据。在下一步，你将看到如何在你的应用街面上添加功能，这样就不需要再在数据库命令行中添加任务了。

专线服务私有云 Todos Meteor meteor.js 服务器03还是08

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86074.html

翻译 Meteor React 制作 Todos - 05 - 更新删除

摘要：现在，我们来学习如何进行更新和删除操作。添加内容开始添加内容结束更新在上面的代码中，我们在确认属性被改变的时候调用了方法。删除在上面的代码中使用了来删除任务。这个函数需要一个参数，一个确定集合中那个子项应该被被删除的身份证号码。确认完成和删除任务到现在为止，我们只有一个和集合互动的方法 -- 在文档中进行插入操作。现在，我们来学习如何进行更新和删除操作。先来给task组件添加两个...

wenshi11019 2019-08-22 10:57 评论0 收藏0
翻译 Meteor React 制作 Todos - 04 - 表单与事件

摘要：通过表单添加任务在这个步骤，我们将为用户在列表上添加输入框。在中，这是一种监听浏览器事件的方式，就像是在表单上有提交事件一样。这对一个任务列表来说并不是非常好。在下一步，我们将给待办事宜的列表添加一个非常重要的功能已完成功能和删除功能通过表单(form)添加任务在这个步骤，我们将为用户在列表上添加输入框。首先，在App.jsx文件中App组件上添加表单吧。 Tod...

Hujiawei 2019-08-21 10:43 评论0 收藏0
翻译 Meteor React 制作 Todos - 11 - 发布订阅

摘要：通过发布订阅模式过滤数据现在我们已经把应用中比较敏感的代码放到了一些方法里面，我们还需要学习安全故事的另一半内容了。当在客户端被调用时传入发布器名称，客户端将会从发布器订阅所有的数据。这个按钮应该只是给任务的所有者来显示。通过发布订阅模式过滤数据现在我们已经把应用中比较敏感的代码放到了一些方法里面，我们还需要学习Meteor安全故事的另一半内容了。到现在为止，我们一直是假设整个整个...

用户83 2019-08-22 10:58 评论0 收藏0
翻译 Meteor React 制作 Todos - 01 - 创建应用

摘要：闲扯在翻译之前我还是要简要介绍一下，这是一款跨时代的框架。后来开始使用动态的脚本语言，比如后来以此构成了框架。最为出名的自然是。通过来传递数据，在本地起这种事情使得开发进入了新的阶段。如果你觉得我翻译的很烂，来给我说吧邮件地址闲扯在翻译之前我还是要简要介绍一下Meteor，这是一款跨时代的框架。真的，完全没有骗你。一开始的网站是纯静态页面搭建的。后来开始使用动态的脚本语言，比如...

VishKozus 2019-08-21 10:42 评论0 收藏0
翻译 Meteor React 制作 Todos - 09 - 添加用户账户

摘要：为了开启这套账户系统和界面，我们需要去添加相关的包。使用，而不是在文件加入开始这段代码只会在客户端执行加入结束添加用户关联功能现在你已经可以创建账户并登录你的应用程序了。例如包含了已登陆用户的用户名。添加多用户账户 Meteor带来了一套账户系统然后顺便还带了用户界面来让你可以在几分钟之内在你的应用中添加多用户功能目前，这套UI组件使用Blaze作为默认的UI引擎，在未来，可能会以...

levius 2019-08-21 10:43 评论0 收藏0