翻译 Meteor React 制造 Todos - 03 - 鸠合

数据存储

鸠合(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 <Task key={task._id} task={task} />;
    });
  },

当你转变了这些代码的时刻,你可能会注意到(浏览器上)那些在todo list上的人物会消逝。这是由于我们的数据库到如今是空的 — 我们得写入一点使命(数据)

经由过程敕令行增加数据

在鸠合中的子项被叫做文档(documents), 蓝运用服务端的数据库敕令行插进去一些文档到我们的鸠合中吧!在一个新的终端窗口上,进入运用程序的目次并输入如许的敕令:

meteor mongo

这就进入了你的运用程序的当地开辟数据库,在提示框中输入如许的敕令:

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

如今在你的浏览器中,你将会看到你的运用程序马上更新了界面并展现了新的使命(数据)。你应当可以邃晓我们并没有写入任何的连接到服务器端数据库的前端代码 — 他就是这么自动的进行了!

再向数据库敕令行中插进去几条差别的数据。鄙人一步,你将看到怎样在你的运用街面上增加功用,如许就不须要再在数据库敕令行中增加使命了。

    原文作者:AnnatarHe
    原文地址: https://segmentfault.com/a/1190000003852385
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞