如果单击更新，流星显示更新字段而不是项目答案

【问题标题】：Meteor show update field instead of item if update clicked如果单击更新，流星显示更新字段而不是项目
【发布时间】：2015-09-04 16:23:25
【问题描述】：

我有最简单的 Meteor 项目，但我被一些基本的东西困住了。我有一个表单域，当我输入一个项目时，它会进入一个 Mongo 集合。我检索并显示该集合，以及用于删除或编辑的按钮。我想要发生的是您单击编辑，该项目变成一个文本框（预先填充了原始值），您可以更改该文本框，点击返回，并更新该项目。我不知道如何正确传递 _id 和/或如何仅将正确的条目转换为字段。

我的 .html 文件：

<head>
  <title>Memorial</title>
</head>

<body>
  <h1>Memorial Testing!</h1>

<form class="new-task">
    <input type="text" name="text" placehoder="Type stuff here" />
</form>
    {{> listing}}
</body>


<template name="listing">
    <ul>
        {{#each tasks}}
            {{> crudlist}}
        {{/each}}
    </ul>
</template>

<template name="crudlist">
    {{#if editor}}
        {{#if editid == this._id}}
            <li><input type="text" name="text" placehoder="Type stuff here" value="{{text}}"/></li>
        {{else}}
            <li>{{text}} :: <button name="delete" class="delete">Delete</button><button name="edit" class="edit">Edit</button></li>
        {{/if}}
    {{/if}}
</template>

我的 .js 文件：

Tasks = new Mongo.Collection("tasks");

if (Meteor.isClient) {

  Template.listing.helpers({
    tasks: function() {
      return Tasks.find({});
    }
  });

  Template.crudlist.helpers({
    editor: function() {
      return Session.get("editor");
    },
    editid: function() {
      return Session.get("editid");
    }
  });


  Template.body.events({
    "submit .new-task": function (event) {
      var text = event.target.text.value;

      Tasks.insert({
        text: text,
        createdAt: new Date()
      });
      event.target.text.value = "";
      return false;
    }
  });


  Template.crudlist.events({
    "click .delete": function () {
      Tasks.remove(this._id);
    },
    "click .edit": function () {
      Session.set("editor","true");
      Session.set("editid",this._id);
    }
  });
}


if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

感谢您的帮助。

【问题讨论】：

标签： meteor

【解决方案1】：

要获取您刚刚点击的内容，您应该使用文档 http://docs.meteor.com/#/full/eventmaps 中的 event.target。

Template.crudlist.events({
    "click .delete": function (event,template) {
      var whatYouJustClicked = event.target,
          targetID = $(whatYouJustClicked).attr('id')
    },
    "click .edit": function (event,template) {
      var whatYouJustClicked = event.target,
          targetID = $(whatYouJustClicked).attr('id')
      Session.set("editor","true");
      Session.set("editid",targetID);
    }

});

【讨论】：