亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

Scott / 1704人閱讀

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

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

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

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

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

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

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

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

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

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

在App.jsx中修改一些部分

// App component - represents the whole app
App = React.createClass({
 
     // 修改內(nèi)容起始
  // 這個(gè)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 ;
    });
  },

當(dāng)你改變了這些代碼的時(shí)候，你可能會(huì)注意到（瀏覽器上）那些在todo list上的人物會(huì)消失。這是因?yàn)槲覀兊臄?shù)據(jù)庫(kù)到現(xiàn)在是空的 -- 我們得寫入一點(diǎn)任務(wù)（數(shù)據(jù)）

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

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

meteor mongo

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/86074.html

相關(guān)文章

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

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

    wenshi11019 評(píng)論0 收藏0

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

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

    Hujiawei 評(píng)論0 收藏0

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

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

    用戶83 評(píng)論0 收藏0

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

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

    VishKozus 評(píng)論0 收藏0

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

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

    levius 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<