Question

我在流星的网站上工作。我刚刚开始使用控制器，但无法弄清楚如何点击按钮。

我有以下temnplate：

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

我的控制员：

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

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

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

我不知道从哪里开始，我认为这与我不理解我应该使用控制器的方式有关。在使用控制器之前，这有效：

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

那我怎么能在我的控制器里面做同样的事情呢？或者我应该为它制定方法吗？

注意：我使用iron：router来呼叫控制器：

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

Answer 1

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

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

此外，您无法在RouteController中获得模板事件，您必须坚持使用Template.login.events，因为您实际上正在进行此操作。但是，您可以将事件从submit form更改为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
  }
});

Answer 2

我认为您只需在警报之前添加“preventDefault”以使其正常工作。

所以你应该修改你的代码如下：

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

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

Meteor得铁事件：路由器控制器

2 个答案: