Question

我正在尝试使用流星上的表格保存mongodb上的数据，ti应该可以工作，但事实并非如此我完全迷失了我在Windows 7机器上运行流星0.7.0.1

bookshell.html

<body>
  {{> addBook}}
  {{> bookshell}}
</body>

<template name="bookshell">
 <ul>
  {{#each books}}
   <li>{{subject}}</li>
  {{/each}}
 </ul>
</template>
<template name="addBook">
 <form class="addBookForm">
  <input type="text" class="subject" placeholder="Subject">
  <button type="submit" class="btn btn-primary">add book</button>
 </form>
</template>

bookshell.js

books = new Meteor.Collection("books");

if (Meteor.isClient) {

Template.addBook.events({
  '.submit .addBookForm' : function (e) {
      e.preventDefault();
      books.insert({
        subject: $(".subject").val(),
      });
    }
});

Template.bookshell.books = function () {
    return books.find({}, {sort: {subject: 1}});
    };
}

有人知道为什么它不起作用？

Answer 1

模板有一个submit事件，处理程序会将提交隔离到模板。因此，除非模板上有多个表单，否则您可以执行此操作：

Template.addBook.events({
  submit: function () {
    books.insert({subject: $(".subject").val()});
    return false;
  }
});

来自文档的说明：

从处理程序返回false与调用两者相同 stopImmediatePropagation并阻止对事件的默认。

Answer 2

我认为表单提交上没有模板事件。只需将事件放在按钮上（甚至可以删除表单，或者阻止默认设置）：

提供您的按钮和ID：

<button id="submitbutton" class="btn btn-primary">add book</button>

并向其添加点击事件：

Template.addBook.events({
  'click #submitbutton' : function (e) {
     e.preventDefault();
     books.insert({
     subject: $(".subject").val(),
  });
}

}）;

Answer 3

只需改变：

'.submit .addBookForm'

为：

'submit .addBookForm'

此外，您可能希望将".subject"选择器的范围限定为模板实例：

Template.addBook.events({
  'submit .addBookForm' : function (event, template) {
    event.preventDefault();
    books.insert({
      subject: template.find(".subject").value,
    });
  }
});

在meteor mongodb上插入数据的表单

3 个答案: