javascript - Bootstrap Popover 不显示 popover 内容

Question

我将 emberjs 与 twitter-bootstrap 一起使用，但只有 css，所以没有从 bootstrap 获取的 javascript。

我想让 popover 工作，它弹出了，但是 popover-content 没有显示，即使它被设置了。这是我的代码:

popoverTemplate.hbs:

<div class="popover fade right in" style="top: 12.5px; left: 242px; height:200px;width:200px; display: block;">
<div class="arrow"></div>
<h3 class="popover-title">A Title</h3>
<div class="popover-content">And here's some amazing content. It's very engaging. right?</div>

我的看法:

 App.PopoverView = Ember.View.extend({
     templateName: 'popoverTemplate'
 });

这是发出切换行为的 Controller :

    showPopover: null,
    init:function(){
        this.set('showPopover',false);
    },
    togglePopoverView: function(){
        this.set('showPopover',!this.get('showPopover'));
    }

这是我的主模板，我在其中设置弹出框的逻辑:

     {{#if showPopover}}
                {{view App.PopoverView}}
     {{/if}}

更新我想通了，不幸的是你无法在我的代码中找到错误 - 至少我已经放在这里了。问题是，在我的模板中，一开始我用 #with 助手设置了上下文，然后忘记了它。所以很可能我会删除这个问题。感谢您的贡献。

Answer 1

当 Ember 将您的弹出框插入 DOM 时注册您的弹出框。这就是我在我的元素中所做的。不完全是，但我希望这可以为您提供线索以完成这项工作。

App.PopoverView = Ember.View.extend({
    templateName: 'popoverTemplate',
    didInsertElement: function() {
       this.$('.popover').popover(
            {
                title: $(this).attr('data-title'),
                content: $('#popover-content').html() });
            });
    }
});

您的 HTML 应如下所示:

<a class="popover" data-title="Title Here">Toggle Popover</a>
<div id="popover-content">
   <!-- content... -->
</div>

应该可以在没有额外代码的情况下工作，当您单击链接时会切换弹出窗口。