Question

我正在尝试将Bootstrap Popover与EmberJS一起使用，以便popover的内容将是一个ember / handlebars模板（带有绑定等）。如何才能做到这一点？（Ember 1.0.0-rc2）

Answer 1

以下是一个ember bootstrap popover的工作示例（请参阅http://jsfiddle.net/72fSd/）：

App.Popover = Ember.View.extend({
        parentSelector: '',
        contentSelector: '',
        didInsertElement: function () {
            var self = this;
            $(self.parentSelector).popover({
                html: true,
                content: function() {
                    var $content = $(self.contentSelector);
                    return $content.html();
                }
            });
        }

实例化视图：

{{view App.Popover templateName="my-popover-content" parentSelector=".popoverButton" contentSelector="#popovercontent"}}

此处， parentSelector 可能是选择一个按钮。确保在my-popover-content模板中有一个id为#popovercontent的div容器，以便 contentSelector 起作用。当然，您需要在初始化视图之前加载模板。

双向绑定应该适用于该解决方案。

Answer 2

我进一步考虑了Terry的答案，并认为我已经提出了一个简单，通用的解决方案。

我创建了一个bootstrap-popover组件，如下所示：

App.BootstrapPopoverComponent = Ember.Component.extend({
  tagName: 'div',      //whatever default you want... div is default anyway here
  classNames: '',      //whatever default you want
  placement: 'bottom', //whatever default 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');
  }
});

以下是相关模板：

<script type="text/x-handlebars" id="components/bootstrap-popover">
  {{title}}
  <div class="popoverJs hide">
    {{yield}}
  </div>
</script>

注意使用＆＃34;隐藏＆＃34;类最初隐藏产生的内容。这个类只是＆＃34; display：none＆＃34;。如果没有这个，事情就不会像你希望的那样发挥作用。

一旦你有了这个，只要你想要一个popover，你就可以做这样的事情：

  {{#bootstrap-popover title="My Fancy Popover" tagName="button"}}
    <ul>
      <li>my</li>
      <li>awesome</li>
      <li>popover</li>
      <li>contents</li>
      <li>example</li>
    </ul>
  {{/bootstrap-popover}}

内容应该是你想要的任何东西 - 任意HTML，渲染组件或部分等等。当然，你可以根据需要指定其他tagNames，classNames，title，placement等。< / p>

我希望这个解决方案有所帮助。

Answer 3

例如，如果您想要弹出图像，请在视图中执行此类操作

imgTag: '<img src="smiley.gif" alt="Smiley face" height="42" width="42">',

didInsertElement: function () {
    var self = this;
    Ember.run.schedule('actions', this, function () {
        self.$().popover({
            title: 'Smile!!!',
            html: true,
            content: self.get('imgTag'),
            placement: 'bottom',
            trigger: 'hover'
        });
    });
},

willDestroyElement: function () {
    this.$().popover('destroy');
}

Answer 4

我也遇到了这个问题，并且罗伯特提到了同样的问题，可接受的解决方案根本无法很好地扩展到更复杂的场景。

我遇到了一个非常优雅的解决方案，但我不确定它对未来的友好程度。我正在利用renderToBuffer函数 - 见下文：

//make your popover view to be created later
App.PopoverView = Ember.View.extend({
  templateName : 'name-of-your-template-with-content'
});

//then you make your link that will trigger the popover
App.PopoverLinkView = Ember.View.extend({

  tagName : 'a',

  didInsertElement : function(){

  var that = this;

  this.$().popover({
    'html' : true,
    'content' : function(el){
    var detailView = App.PopoverView.create();
    var html = detailView.renderToBuffer().buffer;
    return html;
    }
  });

  }

});

这里的优势在于您可以传递模型并使事物变得动态。没有对它进行彻底的测试，但希望将其发布到那里以帮助其他人。

Answer 5

我把罗伯特的答案放在上面。我创建了一个Component，并且只使用jQuery元素来代替调用.html（）。（这减轻了页面中重复ID的问题。）

App.CustomPopoverComponent = Ember.Component.extend({
  tagName: 'button',
  classNames: 'btn btn-default',
  type: 'button',
  popoverContentSelector: '',
  didInsertElement: function () {
    var component = this,
        contents = $(component.get('popoverContentSelector'));

    component.$().popover({
      placement: 'bottom',
      html: true,
      content: contents
    }).on('show.bs.popover', function () {
      contents.removeClass('hide');
    });
  },
  willDestroyElement: function () {
    this.$().popover('destroy');
  }
});

我使用Bootstrap的'hide'类来隐藏最初的内容。然后我第一次删除了'hide'类，显示了popover。从那时起，事情按预期进行。

这是如何在手柄模板中使用该组件：

  {{#custom-popover popoverContentSelector='.popoverContents'}}
    Popover Button
  {{/custom-popover}}

Bootstrap Popovers与ember.js模板

5 个答案: