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

資訊專欄INFORMATION COLUMN

翻譯 Meteor React 制作 Todos - 08 - 模板UI的狀態(tài)

dcr309duan / 3466人閱讀

摘要：組件有一個名叫狀態(tài)的特殊變量。將會異步地更新狀態(tài)屬性，然后讓組件重新渲染。使其可以在為時，過濾我們已完成的任務(wù)。因為我們已經(jīng)有數(shù)據(jù)在客戶端的里了，所以添加額外的總數(shù)并不會向服務(wù)器再次申請數(shù)據(jù)。

在組件狀態(tài)中存儲臨時數(shù)據(jù)

在這個步驟，我們會在為應(yīng)用的客戶端添加數(shù)據(jù)過濾特性，這樣用戶就可以通過點擊’確認(rèn)選框‘來查看當(dāng)前進(jìn)行的任務(wù)。我們會去學(xué)習(xí)如何僅在客戶端使用React組件狀態(tài)來存儲臨時模板

首先，我們需要在我們的App組件中，添加’確認(rèn)選框‘




  
Todo List


    
  
    

  

    

你可以看到要在this.state.hideCompleted上的讀取屬性。React組件有一個名叫state（狀態(tài)）的特殊變量(field)。你可以在state中存儲運算后的組件數(shù)據(jù)，我們需要在組件中去定義一個叫做getInitialState的方法來初始化這個變量


// 在App.jsx文件中
// 這個mixin將會使得getMeteorData方法正常執(zhí)行
mixins: [ReactMeteorData],

// 添加開始
getInitialState() {
  return {
    hideCompleted: false
  }
},
// 添加結(jié)束

// 從Tasks集合中讀取數(shù)據(jù)并傳送到this.data.tasks中
getMeteorData() {
  return {


你可以在事件監(jiān)聽中通過從一個叫做this.setState的方法來更新this.state。this.setState將會異步地更新狀態(tài)屬性，然后讓組件重新渲染。


// 在App.jsx文件中

  React.findDOMNode(this.refs.textInput).value = "";
},

// 添加開始
toggleHideCompleted() {
  this.setState({
    hideCompleted: ! this.state.hideCompleted
  });
},
// 添加結(jié)束

render() {
  return (
    


現(xiàn)在我們得更新getMeteorData方法。使其可以在this.state.hideCompleted為true時，過濾我們已完成的任務(wù)。


// 在App.jsx文件中 

// 從Tasks集合中讀取數(shù)據(jù)并傳給this.data.tasks
getMeteorData() {

    // 修改開始
  let query = {};

  if (this.state.hideCompleted) {
    // If hide completed is checked, filter tasks
    query = {checked: {$ne: true}};
  }

  return {
    tasks: Tasks.find(query, {sort: {createdAt: -1}}).fetch()
  };
    // 修改結(jié)束

},

renderTasks() {


現(xiàn)在，如果你確認(rèn)了任務(wù)已完成，任務(wù)列表中將會只顯示那些沒有被完成的任務(wù)。

再來個特性：顯示未完成任務(wù)的數(shù)量

我們已經(jīng)編寫了語句來過濾已完成的任務(wù)，我們也可以使用相同的語句去展示沒有被確認(rèn)完成的任務(wù)的數(shù)量。要完成這個特性，我們要從getMeteorData的方法中獲取總數(shù)，然后再render方法中添加一行。因為我們已經(jīng)有數(shù)據(jù)在客戶端的MiniMongo里了，所以添加額外的總數(shù)并不會向服務(wù)器再次申請數(shù)據(jù)。


// 在App.jsx文件的getMeteorData的return改成這樣
return {
      tasks: Tasks.find(query, {sort: {createdAt: -1}}).fetch(),
      incompleteCount: Tasks.find({checked: {$ne: true}}).count()
    };


// 在App.jsx的render方法的return 附近，添加這么一句
return (
  

    


        // 修改開始
      
Todo List ({this.data.incompleteCount})

            // 修改結(jié)束

      

            
                     
             
               

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

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

相關(guān)文章

  • 翻譯 Meteor React 制作 Todos - 10 - 方法的安全性

    摘要：在上，最好的方法就是通過聲明方法。這些方法叫做還有，這將會替換執(zhí)行的方法。我們做這些是為了開啟一個我們稱之為樂觀的的特性?？蛻舳讼蚍?wù)器端發(fā)送一個在安全環(huán)境下的請求。 方法的安全性 在這個步驟之前，這款應(yīng)用的任何用戶都可以修改數(shù)據(jù)庫的任何部分，在一個非常有意思的小項目或者演示項目中可能已經(jīng)不錯了，但是任何一個真實的應(yīng)用都需要對這些數(shù)據(jù)進(jìn)行權(quán)限控制。在Meteor上，最好的方法就是通過聲...

    Steven 評論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作為默認(rèn)的UI引擎，在未來，可能會以...

    levius 評論0 收藏0

  • 翻譯 Meteor React 制作 Todos - 02 - 組件

    摘要：用定義視圖組件在中，視圖組件是被使用定義的。你的組件可以有任何你想要的方法。組件可以接收來自于父組件通過屬性傳過來的數(shù)據(jù)。因為本教程專注于和，所以你可以拷貝下面的代碼到文件中。嘿嘿，來添加上吧只要把改名成就好了 在 React 組件中定義視圖 在開始編寫React視圖庫之前，要先添加react包，這個包囊括了你在Meteor應(yīng)用中開始運行React所需要所有東西。這個React庫自己可...

    wuyangnju 評論0 收藏0

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

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

    用戶83 評論0 收藏0

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

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

    VishKozus 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<