Question

我正在尝试在Ember中使用带有嵌套路由的bootstrap popover。这里弹出窗口的内容是嵌套路由的渲染内容，我希望弹出窗口显示在触发它的按钮上。现在我已经设置好了按钮触发转换到嵌套路径，然后在didInsertElement上嵌套路径中的视图，我最终执行代码以显示触发元素上的弹出窗口。但为了做到这一点，我手动拼接触发元素的id并手动调用它上面的弹出框。像这样：

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

这似乎有效，但在干净，可维护的代码和关注点分离方面感觉真的很蠢。它肯定不是“Ember方式”。但是我很难为自己整理一下这样做的最佳方法。

Answer 1

如果你想使用一个组件作为bootstrap 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组件，你可以在其中显示你想要的任何东西，我不知道它是否是最好的实现，但它对我有效：）

Emberjs：访问路由中的触发元素（bootstrap popover作为嵌套路由）

1 个答案: