Twitter bootstrap Emberjs:访问路由中的触发元素（引导popover作为嵌套路由）

我正在尝试在Ember中使用一个带有嵌套路由的引导popover。这里，popover的内容是嵌套路由的渲染内容，我希望popover显示在触发它的按钮上。现在，我已经设置好了按钮触发到嵌套路由的转换，然后在

didInsertElement

上，对于嵌套路由中的视图，我最终执行代码以在触发元素上显示弹出框。但为了做到这一点，我手动缝合触发器元素的id，并手动调用其上的popover。像这样：

App.PopoverView = Ember.View.extend({
    didInsertElement: function () {

        var controller = this.controller;

        if(controller && controller.get('model')){

            var uniqueId = controller.get('model').get('uniqueId');
            var triggerBtn = $('#unique-trigger-' + uniqueId);

            triggerBtn.popover({
                html: true,
                title: 'Popover Title',
                placement: 'left',
                content: getPopoverContent,
                trigger: 'focus'
            });         

            triggerBtn.popover('show');

            triggerBtn.on('hidden.bs.popover', function(){
                controller.send('close');
            });

        }

        function getPopoverContent() {
            return $('.popover-content');
        }
    }
});

---

这似乎是可行的，但从干净、可维护的代码和关注点分离的角度来看，它确实令人讨厌。这肯定不是“余烬之路”。但是我很难自己找出实现这一点的最佳方法。

如果您想将组件用于引导popover，您可以这样实现它：

var BootstrapPopoverComponent = Ember.Component.extend({
    tagName: 'div', // The default tagname
    classNames: 'btn btn-default', // Any class you want
    didInsertElement: function() {
        var component = this,
            contents = this.$('.popoverJS');
            component.$().popover({
                animation: false,
                placement: component.get('placement'),
                html: true,
                content: contents
            }).on('show.bs.popover', function() {
                contents.removeClass('hide');
            });
    },
    willDestroyElement: function() {
        this.$().popover('destroy');
    }
});

我假设您知道

{{yield}

是如何工作的。 在组件模板中：

{{btnText}}
<div class="popoverJS hide">
    {{yield}}
</div>

{{#bootstrap-popover btnText="ClickME" tagName="button"}}
// Whatever you want to render inside your popover
{{/bootstrap-popover}}

---

这样，您就有了一个可重用的popover组件，您可以在其中显示任何您想要的内容，我不知道这是否是最好的实现，但对我来说效果很好：）

我认为您应该为您的popover使用一个组件。谢谢。关于如何解决组件的触发元素问题，我有什么想法吗？这看起来确实是处理组件中popover的有效方法。但我的要求之一是popover的内容将是嵌套路由。所以问题是，我真的不能用一个组件声明每个popover目标，因为我不能为嵌套路由拥有多个出口。我基本上必须有一个插座，它的内容可以插入到多个页面元素的popover中。我也用它来显示嵌套的路由。您可以将

{{outlet}}

放入bootstrap popover bloc类型中，它工作正常。嗯，好的。让我试试，然后再打给你。