我正在尝试在EmberJS中使用Bootstrap Popover,以便弹出窗口的内容是一个带有绑定等的ember/handlebars模板。如何实现?(Ember 1.0.0-rc2)
我正在尝试在EmberJS中使用Bootstrap Popover,以便弹出窗口的内容是一个带有绑定等的ember/handlebars模板。如何实现?(Ember 1.0.0-rc2)
这里有一个可以工作的 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 正常工作。当然,在视图初始化之前您需要加载该模板。
使用此解决方案应该可以实现双向绑定。
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"></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,渲染组件或部分等。当然,你可以根据需要指定其他标记名称、类名、标题、位置等。
我希望这个解决方案能帮到你。
{{action ...}}
助手的元素,则这些元素将丢失,因为组件所做的是从模板呈现的元素中克隆弹出窗口html到实际呈现的新元素中。在该过程中,操作处理程序会丢失。我仍在努力解决如何克服这个问题。但是,答案本身没有任何问题。我知道我的用例非常罕见。 - Ernesto例如,如果您想要弹出图像,请在视图中执行以下操作:
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');
}
//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;
}
});
}
});
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');
}
});
{{#custom-popover popoverContentSelector='.popoverContents'}}
Popover Button
{{/custom-popover}}
parentSelector
和contentSelector
。最简单的解决方案如 http://cowbell-labs.com/2013-10-20-using-twitter-bootstrap-js-widgets-with-ember.html 中所述。 - morgoth