流星在铁中获取事件：路由器控制器答案

【问题标题】：Meteor get event in iron:router controller流星在铁中获取事件：路由器控制器
【发布时间】：2016-09-22 21:49:15
【问题描述】：

我在流星的网站上工作。我刚开始使用控制器，但不知道如何点击按钮。

我有以下模板：

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

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

我不知道从哪里开始，我认为这与我不了解应该如何使用控制器的事实有关。在使用控制器之前，这可行：

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

【问题讨论】：

标签： javascript meteor iron-router

【解决方案1】：

您的问题来自“提交”类型的input 将提交表单，这将触发页面重新加载，因为表单的默认目标是相同的 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
  }
});

【讨论】：

不，仍在重新加载。您确定这是在控制器内执行此操作的正确位置吗？
不对，没有意识到，你将无法在路由控制器中获取模板事件，我认为你仍然需要使用模板事件函数Template.login.events。可能还是event.preventDefault();我会更新我的答案
感谢您的更新。还是有问题。如果我想使用 Template.login.event 我需要同时导入登录模板和模板包。但我想我不想在 RouterController 内执行此操作，因为我不想在控制器内导入模板文件。那么我应该制作一个单独的客户端文件来处理事件等吗？
是的，通常您有一个单独的 js 文件，其中包含模板“逻辑”，如帮助程序、事件等。您不必在路由器中“导入”此文件，因为它是模板名称会帮助 Meteor 找到对应的 Template 逻辑。只需创建一个包含Template.login.... 的客户端文件，Meteor 就会将逻辑绑定到 html 模板

【解决方案2】：

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

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

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

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

【讨论】：

不，仍在重新加载。您确定这是在控制器内执行此操作的正确位置吗？