Bootstrap Popovers与ember.js模板

Question

我试图用引导酥料饼与EmberJS,使酥料饼的内容将是一个余烬/车把模板(与结合等).如何才能做到这一点？(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>

注意使用"hide"类来隐藏最初产生的内容.这个类只是"display:none".如果没有这个,事情就不会像你希望的那样发挥作用.

一旦你有了这个,只要你想要一个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等.

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