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

Question

So I'm trying to make a Grocery List app for a project for school. 因此，我正在尝试为学校的一个项目开发一个食品杂货清单应用程序。 What I want is for users to be able to make a list of items, then as they find them move them to a "Found items" list, while putting in the sale price of the item. 我想要的是使用户能够列出项目清单，然后在找到他们时将其移动到“找到的项目”清单中，同时输入项目的销售价格。 I have two Mongo collections "Items" for the items they are looking for, and "Found_items" for the ones they have found. 我对他们正在寻找的项目有两个Mongo集合“项目”，对于他们所发现的项目有“ Found_items”。 I've having trouble moving the items from Items to Found_items. 我在将项目从Items移到Found_items时遇到了麻烦。 They do get removed from Items but don't seem to be getting put into Found_items, or at least they aren't showing up on the UI. 它们确实已从Items中删除，但似乎没有放入Found_items中，或者至少它们没有出现在UI中。 I'm pretty sure they problem is somewhere in what happens when you click on the "Found" button. 我很确定他们的问题出在当您单击“找到”按钮时发生的事情。 My code is below... 我的代码如下...

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

project.js project.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
      });

    }
  });
}

Any explanation as to what I am doing wrong would be greatly appreciated. 关于我在做什么错的任何解释将不胜感激。

Answer 1

The only problem is your "click .found" handler, as event.target is the button, which does not have price or text properties. 唯一的问题是您的“ click.found”处理程序，因为event.target是按钮，它没有price或text属性。

Change it to: 更改为：

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
      });

Also event handlers are passed two arguments, the event object, and the template instance that the handler is defined on. 此外，事件处理程序还传递了两个参数，即事件对象和定义处理程序的模板实例。 So you can change it to: 因此，您可以将其更改为：

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

      ...

      });

Because this contains the data context used to create this (item) template, you can further simplify to this: 因为this包含用于创建此（项目）模板的数据上下文，所以您可以进一步简化为：

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

event.preventDefault() has also been removed, as there is no default action to prevent on this target (It's needed on your other event, being a form submit event). event.preventDefault（）也已删除，因为没有可防止对此目标进行默认操作的操作（其他事件（表单submit事件）则需要此操作）。

Answer 2

Just do Found_items.insert(this) 只需执行Found_items.insert(this)

Make sure you are publishing and subscribing to this collection properly. 确保您正在正确发布和订阅此收藏集。

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-11-26 04:56:52

解决方案2
0 2015-11-26 04:48:38

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-11-26 04:56:52

解决方案2 0 2015-11-26 04:48:38

解决方案1
2 已采纳 2015-11-26 04:56:52

解决方案2
0 2015-11-26 04:48:38