翻译 Meteor React 制作 Todos - 05 - 更新删除

wenshi11019 发布于2019-08-22 10:57 / 2288人阅读

摘要：现在，我们来学习如何进行更新和删除操作。添加内容开始添加内容结束更新在上面的代码中，我们在确认属性被改变的时候调用了方法。删除在上面的代码中使用了来删除任务。这个函数需要一个参数，一个确定集合中那个子项应该被被删除的身份证号码。

确认完成和删除任务

到现在为止，我们只有一个和集合互动的方法 -- 在文档中进行插入操作。
现在，我们来学习如何进行更新和删除操作。

先来给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函数需要一个参数，一个确定集合中那个子项应该被被删除的身份证号码。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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