2

我正在使用 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>

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

谢谢

4

2 回答 2

0

只要定义了要在onmouseover事件中调用的函数，这很简单：

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

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

于 2013-03-20T13:39:35.620 回答
0

{{:#data}}将 #data 呈现为字符串，因此除非 #data 整齐地进行字符串化和解析，否则该方法将不起作用。如果没有手动 JSON 使用，对象将不会整齐地字符串化或解析。事实上，我怀疑只有数字、布尔值和undefined，并且null会正确地进行字符串化和解析。如果函数不是全局的，这种方法也将不起作用。任何时候都被迫在全局范围内定义回调函数，这让我觉得这是一个严重的问题。所以我不推荐使用标签内事件处理程序，尤其是当您已经运行 JavaScript 时。

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

将一个类或其他一些选择器添加到您的<li>.

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

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

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');
于 2013-04-19T18:34:18.313 回答