在 twitter bootstrap popover 中为表的所有行显示不同的内容答案

【问题标题】：Display different content for all the rows of a table in twitter bootstrap popover在 twitter bootstrap popover 中为表的所有行显示不同的内容
【发布时间】：2013-10-30 12:01:47
【问题描述】：

<tbody data-bind="foreach: hearings">
    <tr>
            <td><span data-bind="text: ID, event: { mouseover: $parent.displayHearingsCaseID }" class="hearingIDCell"></span></td>
    </tr>
</tbody>

在 span 元素的鼠标悬停事件上，我正在动态生成要在弹出窗口上显示的内容。由于 span 元素对于所有记录将具有相同的 id/class，因此弹出框为所有行显示相同的内容。如何为所有行显示不同的内容？

$('.hearingIDCell').popover({ trigger: 'hover', content: caseIDString, title: "Case ID" });

为每一行生成字符串 caseIDString 的值。

【问题讨论】：

标签： twitter-bootstrap knockout.js popover

【解决方案1】：

当鼠标悬停时，displayHearingsCaseID 将被调用，并将与该行关联的hearings 元素作为其第一个参数。大概它的字段包含您需要的信息，因此您可以使用

$('.hearingIDCell').popover({
   trigger: 'hover', content: data.caseIDString,
   title: "Case ID"
});

data 是传递给事件处理程序的参数。

【讨论】：

caseIDString 中的值是针对 displayHearingsCaseID 函数内的每一行计算的。它是函数内部的局部变量。它在 data 参数中不可用。

【解决方案2】：

Knockout 将事件对象作为第二个参数传递给处理函数。

 $(event.currentTarget).popover({ content: caseIDString, trigger: 'hover', title: "Case ID" });

上面的行现在显示了动态生成的所有行的不同内容。

【讨论】：