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

資訊專欄INFORMATION COLUMN

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

dcr309duan / 3554人閱讀

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

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

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

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




  
Todo List


    
  
    

  

    

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


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

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

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


你可以在事件監(jiān)聽中通過從一個(gè)叫做this.setState的方法來更新this.state。this.setState將會(huì)異步地更新狀態(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時(shí)，過濾我們已完成的任務(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ù)列表中將會(huì)只顯示那些沒有被完成的任務(wù)。

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

我們已經(jīng)編寫了語句來過濾已完成的任務(wù)，我們也可以使用相同的語句去展示沒有被確認(rèn)完成的任務(wù)的數(shù)量。要完成這個(gè)特性，我們要從getMeteorData的方法中獲取總數(shù)，然后再render方法中添加一行。因?yàn)槲覀円呀?jīng)有數(shù)據(jù)在客戶端的MiniMongo里了，所以添加額外的總數(shù)并不會(huì)向服務(wù)器再次申請(qǐng)數(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

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

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

    Steven 評(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帶來了一套賬戶系統(tǒng)然后順便還帶了用戶界面來讓你可以在幾分鐘之內(nèi)在你的應(yīng)用中添加多用戶功能 目前，這套UI組件使用Blaze作為默認(rèn)的UI引擎，在未來，可能會(huì)以...

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

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

    摘要：用定義視圖組件在中，視圖組件是被使用定義的。你的組件可以有任何你想要的方法。組件可以接收來自于父組件通過屬性傳過來的數(shù)據(jù)。因?yàn)楸窘坛虒Ｗ⒂诤停阅憧梢钥截愊旅娴拇a到文件中。嘿嘿，來添加上吧只要把改名成就好了 在 React 組件中定義視圖 在開始編寫React視圖庫之前，要先添加react包，這個(gè)包囊括了你在Meteor應(yīng)用中開始運(yùn)行React所需要所有東西。這個(gè)React庫自己可...

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

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

    摘要：通過發(fā)布訂閱模式過濾數(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ù)的所有者來顯示。 通過發(fā)布訂閱模式過濾數(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)用

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<