成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Scott / 1646人閱讀

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

數(shù)據(jù)存儲

集合(Collection)是Meteor存儲持久化數(shù)據(jù)的方式。Meteor 中的集合比較特殊的是，它可以從服務(wù)端，包括客戶端接收數(shù)據(jù)。這使得編寫視圖邏輯變得更加簡單 -- 不用去寫太多的服務(wù)端的代碼。它也可以自動的自我更新，因此一個視圖組件受到一個集合的支持，他可以自動的展示最新的數(shù)據(jù)。

創(chuàng)建一個新的集合和在你的JavaScript中調(diào)用MyCollection = new Mongo.Collection("my-collection");一樣容易。

在服務(wù)端，這些設(shè)置調(diào)用一個叫my-collection的MongoDB的集合；在客戶端它創(chuàng)建了一個和服務(wù)端集合的緩存鏈接。

我們將會在第十二步學(xué)到更多，但是現(xiàn)在，我們還是寫我們所制定的代碼，將整個數(shù)據(jù)庫持久化到客戶端。

添加一行代碼 去定義我們的第一個集合

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

// 寫在第一行
// 定義一個集合來支撐我們的任務(wù)列表
Tasks = new Mongo.Collection("tasks");
使用來自（數(shù)據(jù)庫）集合的數(shù)據(jù)替換React組件中的數(shù)據(jù)

使用來自Meteor中的數(shù)據(jù)來替換React組件中的數(shù)據(jù)，需要在React組件中包含ReactMeteorData的mixin，在你的組件中帶著這樣的一個Minin你就可以定義一個叫做getMeteorData的方法，這個方法定義了如何跟蹤數(shù)據(jù)的改變。這個你從getMeteorData中返回的對象可以傳遞到render中的this.data?，F(xiàn)在來試試。

在App.jsx中修改一些部分

// App component - represents the whole app
App = React.createClass({
 
     // 修改內(nèi)容起始
  // 這個mixin使得getMeteorData方法可以使用
  mixins: [ReactMeteorData],
 
  // 從Tasks集合中獲取數(shù)據(jù)并添加到this.data中
  getMeteorData() {
    return {
      tasks: Tasks.find({}).fetch()
    }
  },
  // 修改內(nèi)容結(jié)束
 
  renderTasks() {
    // 從this.data中獲取數(shù)據(jù)
    return this.data.tasks.map((task) => {
      return ;
    });
  },

當你改變了這些代碼的時候，你可能會注意到（瀏覽器上）那些在todo list上的人物會消失。這是因為我們的數(shù)據(jù)庫到現(xiàn)在是空的 -- 我們得寫入一點任務(wù)（數(shù)據(jù)）

通過命令行添加數(shù)據(jù)

在集合中的子項被叫做文檔(documents), 藍使用服務(wù)端的數(shù)據(jù)庫命令行插入一些文檔到我們的集合中吧！在一個新的終端窗口上，進入應(yīng)用程序的目錄并輸入這樣的命令：

meteor mongo

這就進入了你的應(yīng)用程序的本地開發(fā)數(shù)據(jù)庫，在提示框中輸入這樣的命令：

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86074.html

相關(guān)文章

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

    摘要：現(xiàn)在，我們來學(xué)習如何進行更新和刪除操作。添加內(nèi)容開始添加內(nèi)容結(jié)束更新在上面的代碼中，我們在確認屬性被改變的時候調(diào)用了方法。刪除在上面的代碼中使用了來刪除任務(wù)。這個函數(shù)需要一個參數(shù)，一個確定集合中那個子項應(yīng)該被被刪除的身份證號碼。 確認完成和刪除任務(wù) 到現(xiàn)在為止，我們只有一個和集合互動的方法 -- 在文檔中進行插入操作?，F(xiàn)在，我們來學(xué)習如何進行更新和刪除操作。 先來給task組件添加兩個...

    wenshi11019 評論0 收藏0

  • 翻譯 Meteor React 制作 Todos - 04 - 表單與事件

    摘要：通過表單添加任務(wù)在這個步驟，我們將為用戶在列表上添加輸入框。在中，這是一種監(jiān)聽瀏覽器事件的方式，就像是在表單上有提交事件一樣。這對一個任務(wù)列表來說并不是非常好。在下一步，我們將給待辦事宜的列表添加一個非常重要的功能已完成功能和刪除功能 通過表單(form)添加任務(wù) 在這個步驟，我們將為用戶在列表上添加輸入框。 首先，在App.jsx文件中App組件上添加表單吧。 Tod...

    Hujiawei 評論0 收藏0

  • 翻譯 Meteor React 制作 Todos - 11 - 發(fā)布訂閱

    摘要：通過發(fā)布訂閱模式過濾數(shù)據(jù)現(xiàn)在我們已經(jīng)把應(yīng)用中比較敏感的代碼放到了一些方法里面，我們還需要學(xué)習安全故事的另一半內(nèi)容了。當在客戶端被調(diào)用時傳入發(fā)布器名稱，客戶端將會從發(fā)布器訂閱所有的數(shù)據(jù)。這個按鈕應(yīng)該只是給任務(wù)的所有者來顯示。 通過發(fā)布訂閱模式過濾數(shù)據(jù) 現(xiàn)在我們已經(jīng)把應(yīng)用中比較敏感的代碼放到了一些方法里面，我們還需要學(xué)習Meteor安全故事的另一半內(nèi)容了。到現(xiàn)在為止，我們一直是假設(shè)整個整個...

    用戶83 評論0 收藏0

  • 翻譯 Meteor React 制作 Todos - 01 - 創(chuàng)建應(yīng)用

    摘要：閑扯在翻譯之前我還是要簡要介紹一下，這是一款跨時代的框架。后來開始使用動態(tài)的腳本語言，比如后來以此構(gòu)成了框架。最為出名的自然是。通過來傳遞數(shù)據(jù)，在本地起這種事情使得開發(fā)進入了新的階段。如果你覺得我翻譯的很爛，來給我說吧郵件地址 閑扯 在翻譯之前我還是要簡要介紹一下Meteor，這是一款跨時代的框架。真的，完全沒有騙你。 一開始的網(wǎng)站是純靜態(tài)頁面搭建的。 后來開始使用動態(tài)的腳本語言，比如...

    VishKozus 評論0 收藏0

  • 翻譯 Meteor React 制作 Todos - 09 - 添加用戶賬戶

    摘要：為了開啟這套賬戶系統(tǒng)和界面，我們需要去添加相關(guān)的包。使用，而不是在文件加入開始這段代碼只會在客戶端執(zhí)行加入結(jié)束添加用戶關(guān)聯(lián)功能現(xiàn)在你已經(jīng)可以創(chuàng)建賬戶并登錄你的應(yīng)用程序了。例如包含了已登陸用戶的用戶名。 添加多用戶賬戶 Meteor帶來了一套賬戶系統(tǒng)然后順便還帶了用戶界面來讓你可以在幾分鐘之內(nèi)在你的應(yīng)用中添加多用戶功能 目前，這套UI組件使用Blaze作為默認的UI引擎，在未來，可能會以...

    levius 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<