Ember Responsive iFrame-Komponente

Question

Ich bin ein PPT in meine App einbetten, so dass ich eine responsive iFrame möchte. Das funktioniert nicht mit dem CSS-basierten Näherungsverfahren Ich habe mir here angesehen.

Ich denke, der beste Weg wäre, nur eine einfache Komponente mit Höhe und Breite Eigenschaften zu machen. Kann ich diese berechneten Eigenschaften/Beobachter, die die Größe des Browsers überwachen und aktualisieren, ändern?

Oder müsste ich ein Größenanpassungsereignis erstellen und die Eigenschaften für das Ereignis aktualisieren?

Ein kleines Codebeispiel würde sehr geschätzt werden!

Dank

Answer 1

würde ich empfehlen, einen CSS basierten Ansatz zu verwenden, aber Sie können eine Komponente verwenden und das Resize-Ereignis verwenden. Im Grunde genommen würden Sie die Ereignislistener window in Ihrem didInsertElement Hook hinzufügen und sie in Ihrem willDestroyElement Hook entfernen. Verwenden Sie einfach jQuery.on() und .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')); 
} 

Sie können die berechneten Eigenschaften nicht verwenden, da sie auf beobachtbaren Eigenschaften basieren müssen. Dies funktioniert nicht für reine JS-Eigenschaften, da dies in einer Ember-Funktionalität der Fall ist. Sie müssen also Art von wrap sie so.