javascript - 铁中的 meteor 获取事件 :router controller

Question

我正在使用 Meteor 开发一个网站。我刚刚开始使用 Controller ，但不知道如何单击按钮。

我有以下模板:

<template name="login">
    <form>
        <input type="email" name="loginEmail">
        <input type="password" name="loginPassword">
        <input type="submit" class="login" value="Login">
    </form>
</template>

还有我的 Controller :

LoginController = RouteController.extend({
  template: 'login',

  'click .login': function(e, t) {
      alert('submit button is clicked');
    }
  });

现在，当我单击提交按钮时，页面会重新加载并将所有数据传递到 URL。这根本不是我想要的。我希望弹出警报。

我不太知道从哪里开始，我认为这与我不明白应该如何使用 Controller 有关。在使用 Controller 之前，这是有效的:

Template.login.events({
    'submit form': function(event){
        event.preventDefault();
        var emailVar = event.target.loginEmail.value;
        var passwordVar = event.target.loginPassword.value;
        Meteor.loginWithPassword(emailVar, passwordVar);
        console.log('loggin in');
    }
});

那么我怎样才能在我的 Controller 中实现同样的事情呢？或者我应该为此制定一个方法？

注意:我使用iron:router 来调用 Controller :

Router.route('/login', {
  name: 'login',
  controller: 'LoginController'
});

Answer 1

您的问题来自于“提交”类型的 input 将提交表单，这将触发页面重新加载，因为表单的默认目标是相同的 URL。因此，您必须阻止按钮的默认行为以避免表单提交，如下所示:

'click .login': function(e, t) {
  e.preventDefault();
  alert('submit button is clicked');
}

此外，您无法在RouteController中获取模板事件，您必须坚持使用Template.login.events，就像您实际所做的那样。但是，您可以将事件从提交表单更改为click .login，如下所示:

Template.login.events({
  'submit form': function(event){
    event.preventDefault();
    var emailVar = event.target.loginEmail.value;
    var passwordVar = event.target.loginPassword.value;
    Meteor.loginWithPassword(emailVar, passwordVar);
    console.log('loggin in');
  }
  //OR
  'click .login': function (event) {
    event.preventDefault();
    //your logic here
  }
});