Ember响应iFrame组件

Question

我正在将PPT嵌入我的应用程序中，所以我想要一个响应灵敏的iFrame。我在这里看到的基于CSS的方法无法实现这一点。

我认为最好的方法就是制作一个具有高度和宽度特性的简单组件。我可以调整这些在浏览器上侦听和更新的计算属性/观察者的大小吗？

或者我需要创建一个调整大小的事件并更新事件的属性？

一个小的代码示例将不胜感激！

感谢

Answer 1

我建议使用基于CSS的方法，但您可以使用组件并使用resize事件。基本上，您可以在didInsertElement挂钩中将事件侦听器添加到window，并在willDestroyElement挂钩中删除它们。只需使用jQuery的.on()和.off()。

onResize() {
    // do whatever you want to calculate your values
    set(this, 'my-frame-with', ...);
},
init() {
    set(this, 'boundOnResize', get(this, 'onResize').bind(this));
},
didInsertElement() {
    jQuery(window).on('resize', get(this, 'boundOnResize'));
},
willDestroyElement() {
    jQuery(window).off('resize', get(this, 'boundOnResize'));
}

您不能为此使用计算属性，因为它们需要依赖于可观察的属性。这将不适用于普通的JS属性，因为这是在ember功能中。所以你需要像这样包装它们。