Meteor.js 将项目从一个集合移动到另一个集合答案

【问题标题】：Meteor.js moving items from one collection to anotherMeteor.js 将项目从一个集合移动到另一个集合
【发布时间】：2016-02-28 22:54:34
【问题描述】：

所以我正在尝试为学校项目制作杂货清单应用程序。我想要的是让用户能够制作物品清单，然后当他们找到它们时将它们移动到“找到的物品”列表中，同时输入物品的销售价格。我有两个 Mongo 集合“项目”用于他们正在寻找的项目，以及“Found_items”用于他们找到的项目。我无法将项目从 Items 移动到 Found_items。它们确实从项目中删除，但似乎没有被放入 Found_items，或者至少它们没有出现在 UI 上。我很确定他们的问题出在单击“找到”按钮时会发生什么。我的代码在下面...

项目.html

<head>
  <title>Grocery List</title>
</head>

<body>
<div class="container">
  <header>
    <h1>Grocery List</h1>

    <form class="new-item">
      <input type="text" name="text" placeholder="Type to add new items" />
    </form>
  </header>

  <ul>
    {{#each items}}
      {{> item}}
    {{/each}}
  </ul>
</div>
<div class="container">
  <header>
    <h1>Items Found</h1>
  </header>

  <ul>
    {{#each found_items}}
      {{> found}}
    {{/each}}
  </ul>
</div>
</body>

<template name="item">
  <li>
    <button class="found">Got it!</button>

    <input type="number" name="price" placeholder="Sale Price" />

    <span class="text">{{text}}</span>
  </li>
</template>

<template name="found">
  <li>
    <span class="text">{{text}}</span>
  </li>
</template>

项目.js

Items = new Mongo.Collection("items");
Found_items = new Mongo.Collection("found_items");

if (Meteor.isClient) {
  // This code only runs on the client
  Template.body.helpers({
    items: function () {
      return Items.find({});
    },
    found_items: function () {
      return Found_items.find({});
    }
  });


  Template.body.events({
    "submit .new-item": function (event) {
      event.preventDefault();

      var text = event.target.text.value;

      Items.insert({
        text: text
      });

      event.target.text.value = "";
    }
  });

  Template.item.events({
    "click .found": function (event) {
      Items.remove(this._id);

      event.preventDefault();

      var price = event.target.price.value;
      var text = event.target.text.value;

      Found_items.insert({
        text: text,
        price: price
      });

    }
  });
}

任何关于我做错了什么的解释将不胜感激。

【问题讨论】：

拥有 1 个集合并让项目有一个名为“found”的字段会不会更容易，并检查是否属实。比 2 个收藏更容易获得
回想起来，是的，这可能会更容易......

标签： javascript mongodb meteor collections

【解决方案1】：

只要Found_items.insert(this)

确保您正确地发布和订阅此集合。

【讨论】：

【解决方案2】：

唯一的问题是您的“click .found”处理程序，因为event.target 是按钮，它没有price 或text 属性。

改成：

Template.item.events({
  "click .found": function (event) {

      event.preventDefault();
      var price = Template.instance().find('[name="price"]').value;
      var text = Template.instance().find('.text').textContent;

      Items.remove(this._id);
      Found_items.insert({
        text: text,
        price: price
      });

事件处理程序也被传递两个参数，事件对象和定义处理程序的模板实例。所以你可以把它改成：

Template.item.events({
  "click .found": function (event, template) {
      event.preventDefault();
      var price = template.find('[name="price"]').value;
      var text = template.find('.text').textContent;

      ...

      });

因为this 包含用于创建此（项目）模板的数据上下文，您可以进一步简化为：

"click .found": function (event, template) {
  this.price = template.find('[name="price"]').value;
  Items.remove(this._id);
  Found_items.insert(this);
}

event.preventDefault() 也已被删除，因为在此目标上没有阻止的默认操作（在您的其他事件上需要它，是一个表单 submit 事件）。

【讨论】：

做到了。非常感谢！