如何绑定mouseover，单击jsrender模板内元素上的事件

Question

我正在使用jsRender并希望绑定事件，例如点击，鼠标悬停在模板内部渲染的元素。绑定事件时，我想将数据作为参数传递。

示例：

<li id="liv_{{:nid}}" onmouseover=[call some function and pass #data]>
<div class="qwqw"><a href="#"></a></div>
<div class="">
    <p class="we">{{:spd}} <span>mph (todo)</span></p>
</div>

<div class="clear"></div>

我尝试了上面提到的代码，但没有奏效。有人可以深入了解如何做到这一点。

由于

Answer 1

只要定义了要在onmouseover事件中调用的函数，这是微不足道的：

<li id="liv_{{:nid}}" onmouseover="someFunction({{:#data}});"> </li>

但是，使用jQuery渲染后绑定这些事件可能更简洁。我可以想象将data-*属性应用于所有这些列表项并在选择器中使用它。

Answer 2

{{:#data}}将#data呈现为字符串，因此除非#data字符串化并且整齐地解析，否则该方法将无效。没有手动JSON使用，对象将不会整齐地进行字符串化或解析。事实上，我怀疑只有数字，布尔，undefined和null才能正确地进行字符串化和解析。如果函数不是全局，那么 的方法将无效。当你想要这样做时，被迫在全局范围内定义回调函数会让我感到非常严重。所以我不推荐使用in-tag事件处理程序，尤其是当你已经运行JavaScript时。

，将渲染的内容插入DOM后，可以将事件绑定到那里。这是一个粗略的草图。

在您的<li>。

中添加一个类或其他一些选择器 - 饲料

<li class="onMouseEnter" id="liv_{{:nid}}"></li>

使用等效的liv_{{:nid}}作为密钥，将每个#data值放入对象中。

var dataMap = {};
$.each(yourDataValues, function (i, value) {
    dataMap['liv_' + value.nid] = value;
});

最后，将实时事件绑定到您推送渲染模板的容器中。

$(containerOfRenderedTemplate).on('mouseenter', '.onMouseEnter', function () {
    var id = $(this).attr('id');
    var data = dataMap[id];
    desiredCallbackFunctionWhichConsumesData(data);
});

dataMap并且事件绑定调用应该在同一范围内。

注意：如果此呈现可能多次发生，并且您需要使用全新呈现的内容替换呈现的内容，则应在绑定新事件之前取消绑定旧事件。

$(containerOfRenderedTemplate).off('mouseenter', '.onMouseEnter');