GSP中的自举弹出窗口 <g:each> 标签

Question

我对Java语言还很陌生，我认为这是我的问题所在。 我想使用Bootstrap弹出窗口来显示特定于弹出窗口数据的链接列表。 因此，以标准的“书籍/作者”示例为例，我想为每个链接到其所有书籍的作者显示一个弹出窗口。 在我的桌子里，我有：

<g:each in="${authors}" var="author">
    <tr>
        <td>${author.name}</td>
        <td>
            <a type="link" class="link popovers" title="Books"
                data-container="body" data-toggle="popover" data-placement="left"
                data-content="to be overwritten">Author's Books
         </td>
     </tr>
     <div id="popover_content_wrapper" style="display: none">
         <div>
             <g:render template="bookList" model="[data : author.bookList]"/>
         </div>
     </div>
</g:each>

以及将模板放入弹出窗口的脚本：

 $(function (){
     $("[data-toggle='popover']").popover (
        {html:true,
         trigger: 'click',
         content : function() {
             return $('#popover_content_wrapper').html();
        })
});

假设我的模板正常工作（看起来如此），这仍然仅显示所有弹出窗口的第一个作者的数据。 我需要怎么做才能为每个作者显示正确的弹出窗口？

Answer 1

问题是您对所有作者都使用相同的ID“ popover_content_wrapper”。 尝试使用status属性为每个作者弹出窗口内容提供唯一的ID，如下所示：

<g:each in="${authors}" var="author" status="i">
    <tr>
        <td>${author.name}</td>
        <td>
            <a type="link" class="link popovers" title="Books"
                data-container="body" data-toggle="popover" data-placement="left"
                data-contentId="popover_content_wrapper_${i}"
                data-content="to be overwritten">Author's Books
         </td>
     </tr>
     <div id="popover_content_wrapper_${i}" style="display: none">
         <div>
             <g:render template="bookList" model="[data : author.bookList]"/>
         </div>
     </div>
</g:each>

然后

$(function (){     
        $("[data-toggle='popover']").each(function( index ) {
            var contentId = $( this ).data('contentId');
            var contentElement = $("#" + contentId);

            $(this).popover ({html:true,
                 trigger: 'click',
                 content : function() {
                     return contentElement.html();
                })
            });

});