Meteor Blaze 什么是最佳实践？流星.events vs jquery

Question

我对 Meteor 还是很陌生...处理拖放、单击等事件的最佳做法是什么？

我了解有两种关键方式：

1) 在 Template..events 中使用“click”、“drop”等内容

 Template.someTemplate.events({

    'click .some-button': function (e) {
        e.preventDefault();
        e.stopPropagation();
        console.log("clicked");
    },

});

2) 在 Template..rendered 中，您只需使用 $(some-selector).click(.... $(something).droppable 等等等

Template.resourcePage.rendered = function(){
    this.$('.some-button').click(function (e) {
        e.preventDefault();

        console.log("clicked");       

    });
 }

所以对我来说，我想这是一回事吗？这只是一个简单的例子，同样的事情也适用于其他事件，如 drop（在 droppable() 中）。 'drop' 没有出现在受支持的 Meteor 事件的正式列表中......这是否意味着我应该使用 #2 方法。

有什么陷阱？有什么解决办法吗？

干杯

Answer 1

当前版本的 Meteor 支持自定义事件（尽管它不在文档中）。我现在正在使用它，它就像这样工作正常：

Template.myTemplate.events({
  'customEvent #button': function(event, template) {
    // can be called with $("#button").trigger( 'customEvent', {some_data: 'some data'} );
    // You can also access data, e.g. 'some data' is accessible at event.some_data
    console.log("clicked!");
  }
});

Answer 2

Meteor 目前在其事件映射中支持以下事件：click、dblclick、focus、blur、change、mouseenter、mouseleave、mousedown、mouseup、keydown、keypress、keyup（您的选项 1）

来源：http://docs.meteor.com/#eventmaps

如果您想要其他事件，那么它们的最佳位置确实是呈现的事件（您的选项 2）。为按钮提供自己的模板极大地提高了可读性、测试和性能。

Answer 3

您可能会在the Blaze wiki 中找到一些有趣的信息（向下滚动到使用 jQuery 的事件）。除此之外，事件是在 .js 文件中定义的，而不是在实际模板（HTML 文件）中定义的。如果必须，请将 jQuery 置于 HTML 文件之外并尝试使用模板助手。 简而言之，对于名为 myView 的模板中元素 #button 的单击事件，这将是代码（最佳实践）：

Template.myView.events = {
  'click #button' : function (event) {
    console.log("The button was clicked");
  }
}

这意味着您可以定义在 Template.myView.events 变量中发生的事件。当然，同一个模板可以有多个事件。您将找到要使用的事件类型in the Meteor documentation。您可以在 js 文件和 Template..events 变量中使用任何 jQuery 代码。