在Meteor中，我如何创建一个通用的事件处理程序

您可以将高级模板绑定到使用子模板创建的元素。那么你只需要做一次绑定。例如

HTML:

<template name="settings">
    {{> login_settings }}
    {{> account_settings }}
    {{> data_settings }}
</template>
<template name="login_settings">
  <btn class="slideToggle">Slide me for login!</btn>
</template>
<template name="account_settings">
  <btn class="slideToggle">Slide me for account!</btn>
</template>
<template name="data_settings">
  <btn class="slideToggle">Slide me for data!</btn>
</template>

JavaScript:

Template.settings.events {
  'click .slideToggle': function() {
    var clickedElement = event.target;
    // add/remove CSS classes to clicked element
  }
};

因此，如果您最终在设置下创建了10个不同的模板定义，那么您仍然只需要将处理程序绑定到一个模板。

我觉得你把事情搞得太复杂了。为什么不这样做？

Template.someTemplate.events({
  'click .button': buttonClicked
});
function buttonClicked(evt) {
  // DRY code to handle a button being clicked
}

这具有正确的分离平衡：事件处理程序只定义一次，但您可以告诉每个模板，您希望其按钮侦听某个事件。如果这还不够好，你可以进一步抽象它：

Template.someTemplate.events(genericEvents);

如果您愿意，甚至可能将genericEvents与该模板的特定事件合并。

以下是我最终所做的。该示例仅显示了通用插入处理程序。

var EventHandler = Base.extend({
btnClickHandler: function(){
    return function (event) {
      event.preventDefault();
      Meteor.eventhandler[event.currentTarget.id](event);
    }
  },
insert: function(event){
    event.preventDefault();
    var params =  $('#insert-form').toJSON(); 
    try{
      window[Meteor.request.controller.capitalise()]['validateParams'](params);
      var ts = new Date();
      params.client_updated = ts;
      var has_popup = params.has_popup;
      delete params.has_popup;
      window[Meteor.request.controller.capitalise()]['insert'](params, function(error, _id){
        if(error){
          Alert.setAlert('Error', error, 'alert-error', true, has_popup);
        } else {
          Alert.setAlert('Success', 'Record successfully created.', 'alert-success', true, has_popup);
          $("#insert-form").reset();
          Meteor.flush();
        }
      });
    } catch(error) {
      Alert.setAlert('Error', error, 'alert-error', true, params.has_popup);
    }
  }
 });
 Meteor.eventhandler = new EventHandler;

现在，我只需要创建手把模板，而不需要任何重要的javascript编码来处理通用事件，并将它们连接起来，如下所示。

$(document).on("click", '#print', Meteor.eventhandler.btnClickHandler());
$(document).on("click", '#insert', Meteor.eventhandler.btnClickHandler());
$(document).on("click", '#remove', Meteor.eventhandler.btnClickHandler());
$(document).on("click", '#removeSubField', Meteor.eventhandler.btnClickHandler());
$(document).on("click", '#insertSubField', Meteor.eventhandler.btnClickHandler())
$(document).on("click", '#update', Meteor.eventhandler.btnClickHandler());
$(document).on("click", '#updateSubField', Meteor.eventhandler.btnClickHandler());
$(document).on("click", "#toggleActive", Meteor.eventhandler.btnClickHandler());
$(document).on("click", "#toggleChild", Meteor.eventhandler.btnClickHandler());

现在，我不必编写任何模板事件映射来处理基本的CRUD。只要/route与集合名称相对应，我就可以创建任意数量的手把模板。尽管我会时不时地进行一些棘手的转换。基本上，通用事件处理程序根据路由（也称为request.controller）将事件连接到一个集合，并通过客户端/服务器共享数据模型对其进行抽象，以进行验证，甚至访问控制Meteor中现有的内容。

它似乎工作得很好，并且大大减少了我的代码库。我有几十个集合，其中我不必编写任何事件映射处理程序，因为基本的CRUD是处理过的，但抽象程度足够高，我可以自定义客户端/服务器共享数据模型的验证、安全性和其他健全性检查。

我在Meteor 1.0.2中解决这个问题的方法是使用动态模板。请参阅Dan Dascalescu的规范答案和文档。

假设您有一组附加到模板"a"的通用事件，并且您希望在模板"B"、"C"answers"D"中利用它们。

HTML:

<template name="A">
  {{> Template.dynamic template=myTemplate}}
</template>

JS:

Template.A.events({
   ... your event code
})

您为"a"定义了一个助手函数，它可以动态地选择要包含的B、C或D（…）中的哪一个：

Template.A.helpers({ // dynamically insert a template
  myTemplate: function(){
    if (...) return 'B'; // return a string with the name of the template to embed
    if (...) return 'C';
    if (...) return 'D';
  }
})    

在"A"中定义的事件现在将在"B"、"C"answers"D"中可用。

请注意，模板"A"不需要包含任何HTML。