javascript - 为什么 Meteor 有一个奇怪的事件处理程序语法？

Question

Meteor 让我困扰的一点是事件附加到模板的方式。这并不是因为不能使用 jQuery 而提示，但我只是无法停止怀疑它们的编写方式有问题。

这是一个精简示例:

Template.input.events = {
    'mousedown input#message' : function(event){
        console.log('the mouse was pressed');
    },

    'touchstart input#message' : function(event){
        console.log('a finger was pressed');
    },
}

谁能向我解释为什么事件名称和查询选择器会组合成一个字符串，如'mousedown input#message'？我只是不明白为什么有人会想要制作出这样的东西。

如果是我，我会像这样将事件嵌套在每个选择器下。注意:此代码不起作用，这只是我认为它应该看起来的样子。

Template.input.events = {
    'input#message' : {
        'mousedown' : function(event){
            console.log('the mouse was pressed');
        },

        'touchstart' : function(event){
            console.log('a finger was pressed');
        }
    }
}

Answer 1

原因之一是您可以使用不带选择器的事件名称将事件附加到模板本身。一个常见的用例是将 submit 事件处理程序附加到包含表单的模板:

Template.someForm.events({
  "submit": function() {
    /*...*/
  }
});

此外，您还可以使用逗号分隔的列表来对多种事件类型使用相同的处理函数。这甚至允许您对完全不同的元素上的不同类型的事件使用相同的事件处理程序。也许您想要创建一个事件处理程序，当用户单击保存按钮或按“s”键并将焦点集中在模板中时，该事件处理程序会触发。 Meteor 的事件系统允许在事件映射中仅用一个定义来定义这一点:

Template.someTemplate.events({
  "keyup, click .save": function(event, template) {
    if (event.type === "keyup" && event.which !== 83) return;

    // save
  }
});

对于你的情况，我可能会这样做:

Template.input.events({
  "mousedown #message, touchstart #message" : function(event){
    // you can do different things by examining event.type
  }
});

但是，尽管 Meteor 的事件 map 有很多优点，但如果您愿意，也可以轻松使用您的格式。下面是一个函数，它采用您的格式获取事件映射并将其转换为 Meteor 事件映射:

// Call it whatever you want
var transformEvents = function(selectorEvents) {
  return _.reduce(selectorEvents, function(meteorEvents, events, selector) {
    _.each(events, function(handler, eventType) {
      meteorEvents[eventType + " " + selector] = handler;
    });
    return meteorEvents;
  }, {});
};

只需将您的事件 map 风格传递给它，它就会将其变成 Meteor 兼容的:)

就无法使用 jQuery 而言，原因是 Meteor 的事件系统会自动将事件处理程序的范围限定为模板实例，而仅使用 jQuery 很难做到这一点。从技术上讲，我认为没有什么可以阻止您使用 jQuery 事件，但它会导致 Meteor 事件系统避免的一些重大问题。