Ractive.js 事件代理中 jQuery 的 $(this) 的等价物

Question

我正在阅读 Ractive.js 事件代理 here。

我现在想用 Ractive.js 中的事件代理替换点击事件（目前在 jQuery 中编写）。这是当前代码：

$('.filter-close').click(function(){
    $(this).parent().hide();
});

HTML 位很简单：

<a on-click="closeFilter" class="filter-close">close</a>

而且我知道如何在 Ractive.js 中创建代理：

ractive.on( 'closeFilter', function ( event ) {
  //code here
});

如果我在其中放置一个警报，它会在点击时正确执行。

我运行遇到的问题是，如何访问元素本身。在上面的例子中，我需要隐藏被点击元素的父元素。在 jQuery 中，我使用 $(this) 来查找元素。我如何在 Ractive 中做同样的事情？

this returns 整个 ractive 对象，$(this) 抛出错误，我认为通过 ID 获取元素首先违背了使用 Ractive 的目的。

我也知道可以随事件一起传递参数，例如 on-click="closeFilter:{{arg}}"，但不知道在这种情况下 arg 应该是什么（或者如果那个是完全正确的方法）。

有人能给我指出正确的方向吗？

Answer 1

event.node 允许访问 DOM 元素

ractive.on( 'activate', function ( event ) {
  // event.node will be the button (will be <button on-click='activate'>Activate!</button>)
});

要访问父节点你可以做event.node.parentNode

如果您的页面上有 jquery，那么您可以轻松地 $(event.node.parentNode).hide();

Answer 2

所以，你在event.node之后，然后访问Javascript中的父节点并隐藏它，如下所示。

ractive.on( 'activate', function ( event ) {
    event.node.parentNode.style.display = 'none';
}

Equivalent of jQuery's $(this) in Ractive.js event proxies