为什么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的事件图有很多优势，但如果你想使用你的格式，也很容易。这里有一个函数，它可以把你格式中的事件图转换成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;
  }, {});
};

只要把你的事件地图风格传递给它，它就会把它变成一个兼容Meteor的事件地图 :)

至于不能使用jQuery，原因是Meteor的事件系统会自动将你的事件处理程序的范围扩展到一个模板实例上，单用jQuery是很难做到的。从技术上来说，我不认为有什么能阻止你使用jQuery事件，但这会造成一些重大的麻烦，而Meteor的事件系统可以避免。