jQuery的等价物's$(this）在Ractive.js事件代理中

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

本文关键字：Ractive js 事件 代理 this 等价物 jQuery      更新时间：2023-09-26

我在这里读到了关于Ractive.js事件代理的文章。

我现在想用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)来查找元素。我如何在Racive中做到这一点？

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

我也知道在事件中传递参数的可能性，比如on-click="closeFilter:{{arg}}"，但不知道在这种情况下arg应该是什么（或者这是否是正确的方法）。

有人能在这里给我指正确的方向吗？

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();

因此，您在event.node之后，访问Javascript中的父节点并将其隐藏，如下所示。

ractive.on( 'activate', function ( event ) {
    event.node.parentNode.style.display = 'none';
}
相关文章：