Question

我对Meteor很新，并在官方文档中关注他们的TODO APP。到目前为止这么好但我想在示例中添加第二个输入，该示例只有一个用于输入和存储＆＃34; 文本的地方。＆＃34;我正在尝试添加＆＃34; 数量＆＃34;字段，以便用户可以输入文本和数量。

如果我浏览命令行并输入：

db.tasks.insert({text: "apples", quantity: 4, createdAt: new Date() });

我可以让数量字段正确填充。但是，在通过DOM提交时，我无法将数据输入数量字段。这是我的HTML：

<head>
  <title>Todo List</title>
</head>

<body>
  <div class="container">
    <header>
      <h1>Todo List</h1>
      <form class="new-task">
        <label for="text">TEXT:</label>
        <input type="text" name="text" placeholder="Type to add new tasks" />
        <label for="text">NUMBER:</label>
        <input type="text" name="quantity" placeholder="Quantity" />
        <input type="submit" class="submit"/>
      </form>

    </header>


    <ul>
      {{#each tasks}}
<!--       this inserts the template called "task" -->
        {{> task}}
      {{/each}}
    </ul>

  </div>

</body>

<template name="task">
   <li class="{{#if checked}}checked{{/if}}">
  <input type="checkbox" checked="{{checked}}" class="toggle-checked" />
    <span class="text">{{text}}{{quantity}}</span>
           <button class="delete">&times;</button>


  </li>
</template>

这是我的JS：

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

if (Meteor.isClient){
  //This code only runs on client
  Template.body.helpers({
    tasks: function () {
        // Show newest tasks at the top
      return Tasks.find({}, {sort: {createdAt: -1}});
    }
  });
  Template.body.events({
    "submit .new-task": function (event) {
      // Prevent default browser form submit
      event.preventDefault();
       console.log(event)

      // Get value from form element
      var text = event.target.text.value;
      var quantity = event.target.text.value;


      // Insert a task into the collection
      Tasks.insert({
        text: text,
        quantity: quantity,
        createdAt: new Date() // current time
      });

      // Clear form
      event.target.text.value = "";
    }
  });

   Template.task.events({
    "click .toggle-checked": function () {
      // Set the checked property to the opposite of its current value
      Tasks.update(this._id, {
        $set: {checked: ! this.checked}
      });
    },
    "click .delete": function () {
      Tasks.remove(this._id);
    }
  });

}

您将看到我尚未完成本教程并对HTML进行了一些修改。

我很确定我弄乱了我的JS。任何帮助将不胜感激！

Answer 1

你有：

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

这两个将是相同的。

改为使用：

var text = $('input[name="text"]').val();
var quantity = $('input[name="quantity"]').val();

Answer 2

只是玩JS，我在发布这个时就发布了它：

   // Get value from form element
      var text = event.target.text.value;
      var quantity = event.target.text.value;

对此：

  // Get value from form element
  var text = event.target.text.value;
  var quantity = event.target.quantity.value;

在Meteor TODO应用程序中添加另一个字段以形成？

2 个答案: