javascript - _.each 的回调函数？

Question

我正在尝试使用下划线的模板功能将动态内容生成到我的 HTML 中。代码如下:

<div id="accordeonExaminadorBaliza" data-role="collapsible" data-theme="b" data-content-theme="b">
  <legend>Examinador de Baliza</legend>
  <ul id="listExaminadorBaliza" data-role="listview" data-inset="true">
    <%  _.each(c.getExaminadores(), function(examinador){ %>
      <li><img width = '80' height = '80' src= "data:image/jpeg;base64,<%= examinador.fotografia %>"> <%= examinador.nome %></li>
    <%  }); %>
  </ul>
</div>

现在，我需要捕获与用户单击的“li”元素相关的对象。如何实现一个事件监听器，单击即可捕获当前“li”元素的对象“examinador”？我对 javascript 没有太多经验，所以请耐心等待。

Answer 1

标识符examinador.nome由模板引擎使用；模板引擎写出文本后，页面上运行的脚本将无法访问它。相反，您可以让模板代码写出您需要的任何数据作为元素上的 data- 属性字符串(使用 - 输出 HTML 转义值):

<%  _.each(c.getExaminadores(), function(examinador){ %>
  <li data-nome="<%- examinador.nome %>"><img width='80' height='80' src="data:image/jpeg;base64,<%= examinador.fotografia %>"><%- examinador.nome %></li>
<%  }); %>

然后使用 jQuery 的 .data 访问它:

$('#listExaminadorBaliza').on('click', 'li', function(){
    alert($(this).data("nome"));
    // or
    alert($(this).attr("data-nome"));
});