Question

查看以下代码段

Template.body.events({
  'submit .new-task'(event) {
    // Prevent default browser form submit
    event.preventDefault();

    // Get value from form element
    const target = event.target;
    const text = target.text.value;

    // Insert a task into the collection
    Tasks.insert({
      text,
      createdAt: new Date(), // current time
    });

    // Clear form
    target.text.value = '';
  },
});

此代码段摘自MeteorJS上的一个教程。

通知'submit .new-task'(event)。这怎么可能？没有流星我该怎么办？

Answer 1

这是以下操作的快捷方式：

Template.body.events({
  'submit .new-task': function (event) {
    // ...
  }
});

流星与它无关。

参考：http://es6-features.org/#MethodProperties

Answer 2

事件是EventHandler的对象，可通过以下逻辑对其进行解析：

'submit .new-task'对于选择器onSubmit解释为.new-task，并且此字符串的声明函数是要执行的函数。

相当于jQuery的是：

$( ".new-task" ).on( "submit", (event) {
    // Prevent default browser form submit
    event.preventDefault();

    // Get value from form element
    const target = event.target;
    const text = target.text.value;

    // Insert a task into the collection
    Tasks.insert({
      text,
      createdAt: new Date(), // current time
    });

    // Clear form
    target.text.value = '';
  },
});

主要区别在于，在Blaze模板事件中，当前模板实例作为第二个参数（示例中未包括）传递，该参数允许您使用ReactiveVar或{{1}获取/设置模板变量}。

使用jQuery编写自定义事件会丢失Blaze为您提供的事件映射的所有功能。

在此处详细了解事件地图：http://blazejs.org/api/templates.html#Event-Maps

在此处阅读有关jQuery事件的更多信息：https://api.jquery.com/on/

meteorjs如何将字符串名称用作函数？

2 个答案: