7

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

4

5 回答 5

12

这是 ember 引导弹出窗口的一个工作示例（请参阅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工作。当然，您需要在视图初始化之前加载模板。

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

于 2013-04-22T12:42:35.327 回答
7

我把特里的回答更进一步，并认为我已经为这个问题想出了一个简单、通用的解决方案。

我创建了一个 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>

请注意最初使用“隐藏”类来隐藏生成的内容。这个类只是“显示：无”。没有这个，事情就不会如你所愿。

一旦你有了它，只要你想要一个弹出框，你就可以简单地做这样的事情：

  {{#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、渲染组件或部分内容等。当然，您可以根据需要指定其他标记名、类名、标题、位置等。

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

于 2014-10-09T20:56:20.570 回答
2

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

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');
}
于 2013-04-15T11:13:01.390 回答
2

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

我遇到了一个非常优雅的修复，但我不确定它对未来的友好程度。我正在利用函数 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;
    }
  });

  }

});

这里的优点是您可以传入模型并使事物动态化。还没有彻底测试它，但想把它拿出来可能帮助其他人。

于 2013-05-12T19:46:21.420 回答
1

我把罗伯特的回答拿得更远了。我创建了一个组件，并且只使用 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 的“隐藏”类来隐藏内容。然后我第一次删除了“隐藏”类以显示弹出框。从那时起，事情就按预期工作了。

这是在您的车把模板中使用该组件的方法：

  {{#custom-popover popoverContentSelector='.popoverContents'}}
    Popover Button
  {{/custom-popover}}
于 2014-10-09T17:40:39.917 回答