2

流星新手。我有一个包含多个字段的表单

<template name="addcityform">
  <form name="addcity">
    <input name="city" class="city" type="text">
    <input name="population" class="population" type="text">
    <input type="Submit" value="Add City">
  </form>
</template>

我只想将字段插入数据库，但我不知道该怎么做。这是我经过几次尝试后目前所拥有的：

Template.addcityform.events({
  'submit .addcity' : function(evt, template) {
    Cities.insert({
      city: template.find('input.city').value,
      population: template.find('input.population').value
    });
  }
});

// this gives: Uncaught TypeError: Cannot read property 'value' of null

我看到了一些使用Session.setand的示例document.getElementById，但由于命名空间冲突的可能性，这对我来说似乎很笨拙。我想以“正确的方式”做到这一点，以便以后可以扩展，例如，我可以将表单的多个实例放到页面上，它们应该相互独立。这样做的“正确方法”是什么？

4

1 回答 1

6

您在“提交表单”处理程序中缺少 event.preventDefault()，否则页面将重新加载并破坏 Meteor 的单页应用程序体验。

我会做类似的事情：

<template name="addcityform">
    <form>
        <input name="city" class="city" type="text">
        <input name="population" class="population" type="text">
        <button type="submit">Add City</button>
    </form>
</template>

Template.addcityform.events({
    "submit form": function(event, template) {
        event.preventDefault();
        Cities.insert({
            city: template.find(".city").value,
            population: template.find(".population").value
        });
    }
});

Meteor 模板最酷的地方在于其中使用的 css 选择器对于当前模板来说是本地的，这意味着“提交表单”将始终引用“在封闭模板中提交表单元素的事件”，因为您只有一个表单在模板。这同样适用于模板实例 .find 方法：它将返回与模板或其子模板中的 css 选择器匹配的元素。这允许您拥有彼此独立的 addcityform 的多个实例。

于 2013-08-22T20:45:48.750 回答