Question

我正在尝试将两个列数据放入bootstrap popover中。我希望它看起来像这样：

Name: crystal
Created On: 1/1/2000
Modified On: 1/31/2000
Owner: Bob

我希望“：”之间有空格，所以这是一个两列布局。此悬停在鼠标悬停时显示在剑道网格中。我用以下内容显示该网格的基本弹出窗口：

$('a.hasPopover').popover({
                placement: 'bottom',
                content: '??????????????????',
                template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-no-title"></h3><div class="popover-content"><p></p></div></div></div>'
            });

在我这个行的模板中，我最初只是为了查看我的popover和数据是否已连接：

详细

这确实有效。但是，我不确定（即使有可能）如何创建一个数据内容模板，该模板将为每个列提供div并将数据推入。所以我想知道如何在内容中使用模板我拥有所有那些????的字段，或者如何正确格式化我的数据内容以拥有两列。提前谢谢！

Answer 1

您无法使用模板。您可以将html选项设置为true，并在数据内容属性中设置html，例如：

<a class="hasPopover" rel="popover" data-content="<div class='span1'>test:</div><div class='span1'>longer text gives a problem?</div><br><div class='span1'>test:</div><div class='span1'>value</div><br>">POPOVER</a>

的javascript：

$('a.hasPopover').popover({
                placement: 'bottom',
                html : 'true',
                template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-no-title"></h3><div class="popover-content"><p></p></div></div></div>'
            });

我觉得这不行。试试content选项。您可以将其用作操作数据内容属性的函数，如：

            content : function(){ return $(this).attr('data-content').toUpperCase(); },

Answer 2

实际上可以使用模板。这是一个例子：

$('a.hasPopover').popover({
  placement: 'bottom',
  html: true,
  content: _.template('<h1><%= test %></h1>')({ test: 'Hello World '})
});

在bootstrap popover中使用下划线模板

2 个答案: