翻訳Meteor React作成Todos-03-集合
2141 ワード
データストア
集合(Collection)は、Meteorが耐久化データを格納する方式である.Meteorの集合は、クライアントからデータを受信することを含む、サービス端末からのものです.これは、ビューのロジックを作成することをより簡単にします.自動的に自己更新することもできますので、1つのビューコンポーネントは1セットのサポートを受けて、彼は最新のデータを自動的に示すことができます.
新しいセットを作成するのはJavaScriptで
サービスでは、これらの設定は
私達は第12歩でもっと多くのことを学びますが、今はやはり私達が制定したコードを書いて、全体のデータベースをクライアントに恒久化します.
行コードを追加して、最初のセットを定義します.
Reactコンポーネント中のデータをMeteorから交換するには、Reactコンポーネントに
App.jsxの一部を修正します.
コマンドラインでデータを追加します.
集合中のサブ項目はドキュメントと呼ばれています.青いのはサービス先のデータベースコマンド行を使っていくつかのドキュメントを私たちの集合に挿入してください.新しい端末ウィンドウで、アプリケーションのディレクトリに入り、このようなコマンドを入力します.
データベースコマンド行に別のデータをいくつか挿入します.次のステップでは、どのようにあなたのアプリケーションの街角に機能を追加するかを確認します.これでデータベースコマンド行にタスクを追加する必要はなくなります.
集合(Collection)は、Meteorが耐久化データを格納する方式である.Meteorの集合は、クライアントからデータを受信することを含む、サービス端末からのものです.これは、ビューのロジックを作成することをより簡単にします.自動的に自己更新することもできますので、1つのビューコンポーネントは1セットのサポートを受けて、彼は最新のデータを自動的に示すことができます.
新しいセットを作成するのはJavaScriptで
MyCollection = new Mongo.Collection('my-collection');
を呼び出すのと同じです.サービスでは、これらの設定は
my-collection
というMongoDBのセットを呼び出します.クライアントでは、サービスのセットとキャッシュリンクが作成されます.私達は第12歩でもっと多くのことを学びますが、今はやはり私達が制定したコードを書いて、全体のデータベースをクライアントに恒久化します.
行コードを追加して、最初のセットを定義します.
simple-todos-react.jsx
の第1行にこのような一節が加わる.//
//
Tasks = new Mongo.Collection("tasks");
Reactコンポーネントのデータを(データベース)セットからのデータで置換します.Reactコンポーネント中のデータをMeteorから交換するには、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上の人物が消えてしまうことに気づくかもしれません.これは私たちのデータベースが今まで空いています.タスク(データ)を書き込みます.コマンドラインでデータを追加します.
集合中のサブ項目はドキュメントと呼ばれています.青いのはサービス先のデータベースコマンド行を使っていくつかのドキュメントを私たちの集合に挿入してください.新しい端末ウィンドウで、アプリケーションのディレクトリに入り、このようなコマンドを入力します.
meteor mongo
これはあなたのアプリケーションのローカル開発データベースに入ります.ヒントボックスにこのようなコマンドを入力します.db.tasks.insert({ text: "Hello world!", createdAt: new Date() });
今はあなたのブラウザで、あなたのアプリケーションがすぐに画面を更新し、新しいタスク(データ)を表示します.サーバー側のデータベースに接続されているフロントエンドコードを書き込むことができませんでした.彼はこのように自動的に進行しました.データベースコマンド行に別のデータをいくつか挿入します.次のステップでは、どのようにあなたのアプリケーションの街角に機能を追加するかを確認します.これでデータベースコマンド行にタスクを追加する必要はなくなります.