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

Scott 發布于2019-08-21 10:43 / 1641人閱讀

摘要：數據存儲集合是存儲持久化數據的方式。中的集合比較特殊的是，它可以從服務端，包括客戶端接收數據。它也可以自動的自我更新，因此一個視圖組件受到一個集合的支持，他可以自動的展示最新的數據。

數據存儲

集合(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?，F在來試試。

在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() });

現在在你的瀏覽器中，你將會看到你的應用程序立刻更新了界面并展示了新的任務（數據）。你應該能夠明白我們并沒有寫入任何的連接到服務器端數據庫的前端代碼 -- 他就是這么自動的進行了！

再向數據庫命令行中插入幾條不同的數據。在下一步，你將看到如何在你的應用街面上添加功能，這樣就不需要再在數據庫命令行中添加任務了。

云服務器 GPU云服務器 Todos Meteor meteor.js 服務器03還是08

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86074.html

翻譯 Meteor React 制作 Todos - 05 - 更新刪除

摘要：現在，我們來學習如何進行更新和刪除操作。添加內容開始添加內容結束更新在上面的代碼中，我們在確認屬性被改變的時候調用了方法。刪除在上面的代碼中使用了來刪除任務。這個函數需要一個參數，一個確定集合中那個子項應該被被刪除的身份證號碼。確認完成和刪除任務到現在為止，我們只有一個和集合互動的方法 -- 在文檔中進行插入操作?，F在，我們來學習如何進行更新和刪除操作。先來給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