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

wenshi11019 發布于2019-08-22 10:57 / 2330人閱讀

摘要：現在，我們來學習如何進行更新和刪除操作。添加內容開始添加內容結束更新在上面的代碼中，我們在確認屬性被改變的時候調用了方法。刪除在上面的代碼中使用了來刪除任務。這個函數需要一個參數，一個確定集合中那個子項應該被被刪除的身份證號碼。

確認完成和刪除任務

到現在為止，我們只有一個和集合互動的方法 -- 在文檔中進行插入操作。
現在，我們來學習如何進行更新和刪除操作。

先來給task組件添加兩個元素：一個確認選框和一個刪除按鈕，并給他們帶上各自的事件監聽

在Task.jsx中寫入下面的內容

// Task component - represents a single todo item
Task = React.createClass({
  propTypes: {
    task: React.PropTypes.object.isRequired
  },

    // 添加內容開始
  toggleChecked() {
    // 當按下按鈕時，設定確認值為當前的相反值
    Tasks.update(this.props.task._id, {
      $set: {checked: ! this.props.task.checked}
    });
  },
 
  deleteThisTask() {
    Tasks.remove(this.props.task._id);
  },
  // 添加內容結束
 
  render() {
      // 添加下面一行的內容
    // 當任務被完成的時候給它們一個不同的class
    // 這樣，通過CSS中的設置后，它們會看起來更好一些。
    const taskClassName = this.props.task.checked ? "checked" : "";
 
    return (

        // 添加內容開始
      
        
 
        
 
        {this.props.task.text}
      
      //添加內容結束

    );
  }
});

更新

在上面的代碼中，我們在確認屬性被改變的時候調用了Tasks.update方法。

這個在集合中的update函數需要兩個參數，第一個參數是一個選擇器，一個集合中子集的身份證，第二個參數是指定更新數據，在匹配到的子集里要干點兒什么

在這個部分，選擇器就是本任務的_id，更新數據的參數就是使用$set去切換checked的值，它代表著此任務是否被完成了。

刪除

在上面的代碼中使用了Tasks.remove來刪除任務。這個remove函數需要一個參數，一個確定集合中那個子項應該被被刪除的身份證號碼。

GPU云服務器云服務器 React Hooks 文檔重大更新！ Todos Meteor meteor.js

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

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

翻譯 Meteor React 制作 Todos - 11 - 發布訂閱

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

用戶83 2019-08-22 10:58 評論0 收藏0
翻譯 Meteor React 制作 Todos - 06 - 部署應用

摘要：添加，刪除，確認完成這些操作，你將會看到你的應用的界面響應非常的快。。這是因為并不會在更新用戶界面之前等著服務端的響應數據。部署你的應用現在你有了一個可以運行的待辦事宜的應用，你可以分享給你的朋友們！Meteor使得發布你的應用到其他人可以使用的互聯網變得非常的簡單。同樣是在你的應用文件夾的命令行中輸入： meteor deploy my_app_name.meteor.com ...

xiaochao 2019-08-22 10:58 評論0 收藏0
翻譯 Meteor React 制作 Todos - 01 - 創建應用

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

VishKozus 2019-08-21 10:42 評論0 收藏0
翻譯 Meteor React 制作 Todos - 03 - 集合

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

Scott 2019-08-21 10:43 評論0 收藏0
翻譯 Meteor React 制作 Todos - 02 - 組件

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

wuyangnju 2019-08-21 10:42 評論0 收藏0