Question

我正在使用带有twitter-bootstrap的emberjs，但只有css所以没有 javascript取自bootstrap。

我想让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'
 });

以下是发出切换行为的控制器：

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

这是我的主要模板，我在其中设置了popover的逻辑：

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

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

Answer 1

当Ember将您的popover插入DOM时注册您的popover。这就是我在项目中所做的。不完全是这样，但我希望这可以为你提供一个线索来实现这一目标。

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>

在没有额外代码的情况下工作，单击链接时使用弹出切换。

Answer 2

您的实施似乎没有任何问题。

这是一个有效的bin

Bootstrap Popover不显示popover内容

2 个答案: