Javascript Meteor.js将项目从一个集合移动到另一个集合_Javascript_Mongodb_Meteor_Collections

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

javascript mongodb meteor collections

Javascript Meteor.js将项目从一个集合移动到另一个集合,javascript,mongodb,meteor,collections,Javascript,Mongodb,Meteor,Collections,所以我正在尝试为学校的一个项目制作一个杂货清单应用程序。我想要的是，用户能够制作一个物品列表，然后当他们发现物品时，将其移动到“找到的物品”列表中，同时输入物品的销售价格。我有两个Mongo集合“Items”用于他们正在寻找的项目，以及“Found_Items”用于他们已经找到的项目。我无法将项目从项目移动到已找到的项目。它们确实会从项目中删除，但似乎不会放入已找到的项目中，或者至少它们不会显示在UI上。我很确定他们的问题在于当你点击“找到”按钮时会发生什么。我的代码在下面 project.ht

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

project.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>

如果您能解释我做错了什么，我们将不胜感激。

只需执行

找到的项目。插入（此）

确保您正确发布和订阅了此收藏。

唯一的问题是您的“单击.查找”处理程序，因为

事件。目标是按钮，它没有价格或文本属性
将其更改为：
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;

      ...

      });

事件处理程序还传递了两个参数：事件对象和定义处理程序的模板实例。因此，您可以将其更改为：
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;

      ...

      });

由于此
包含用于创建此（项目）模板的数据上下文，因此您可以进一步简化为：
"click .found": function (event, template) {
  this.price = template.find('[name="price"]').value;
  Items.remove(this._id);
  Found_items.insert(this);
}

event.preventDefault（）也已被删除，因为在此目标上没有可阻止的默认操作（它是另一个事件所必需的，是一个表单submit
event）。
是否更容易有一个集合，只需让项目有一个名为“found”的字段，然后检查这是否为真。比2个收藏更容易在回顾中，是的，这可能会更容易…这就做到了。非常感谢你！