Ember - 在加载、转换和调整大小时调整大小 DIV？

Question

我正在构建一个 Ember 应用程序，它需要调整容器的大小 DIV 以在应用程序加载时充满 window 高度，然后运行转换到新路线时再次使用相同的调整大小功能，然后 window 调整大小。

在普通网站上，我会这样做：

var appUI = {
    init: function(){
        appUI.sizeContainer();
    },

    sizeContainer: function(){
        var winHeight = jQuery(window).height();
        jQuery('#container').height(winHeight);
    },

    onResize: function() {
        appUI.sizeContainer();      
    }
}
jQuery(document).ready(function($){
    appUI.init();

    jQuery(window).resize(function(){
        appUI.onResize();
    });
});

但显然这在 Ember 中行不通。

这不能是组件，因为 #container DIV 包裹了整个当前视图。但是随着 Ember 远离视图，我应该怎么做？

我想出的唯一方法是使用视图，然后挂接到 didInsertElement，但我无法弄清楚如何在不创建 view.js 文件的情况下做到这一点对于每条路线，都包含相同的调整大小代码？调整大小事件怎么样？我认为应用程序视图 didInsertElement 可能适用于此，但它只有运行加载一次。

我所有的路线模板基本上都遵循这个模式：

{{top-header}}

{{background-image image=backgroundImage}}

{{side-menu session=session menuOpen=menuOpen}}

<div id="container" class="vert-center route-name"> 

    {{partial "_logo"}}         

    {{some-component}}

</div>

Answer 1

加载应用程序和 window 调整大小几乎可以按照您描述的方式完成。

一种简单的方法是覆盖 ApplicationRoute 中的 renderTemplate 挂钩。在这个钩子中，您可以呈现您的应用程序模板，然后在 window 对象上初始化 resize 侦听器：

// handles on document load and on window change events
App.ApplicationRoute = Ember.Route.extend({
    renderTemplate: function(controller, model) {
        this.render('application');             // render the application template
        appUI.init();                           // call the init event on application load
        Ember.$(window).resize(function() {     // setup resize listener on the window object that will be called when window resizes
            appUI.onResize();
        });
    }
});

就每次加载路由时调整大小而言，您可以实现一个通用的 Ember.Route，我们称它为 ResizableRoute，例如，它会在其模板呈现后调用 appUI.resize() .这可以再次通过覆盖 renderTemplate 挂钩来实现。

// calls onResize() each time the current route's template is rendered in the DOM
App.ResizableRoute = Ember.Route.extend({
    renderTemplate: function() {
        // render the template with the same name as the route (assumes you follow ember naming conventions)
        this.render(this.routeName); 
        // call resize since the route is loaded         
        appUI.onResize();
    } 
});

现在您可以让任何其他路由扩展此 ResizableRoute，并且每次呈现该路由的模板时，都会调用 appUI.onResize()。

App.AnyOtherRoute = App.ResizableRoute.extend({
    // do other stuff
});

所有调用都在模板呈现之后进行的原因是因为这样 #container 元素肯定已经插入到 DOM 中并且可以使用 jQuery.

抓取

Here is a running jsFiddle example

编辑

不是覆盖 renderTemplate 挂钩，实现此目的的另一种方法是创建一个 ResizeUIComponent，它会在每次加载路线时执行调整大小。缺点是你必须记住将这个组件插入到每个路由的模板中。

App.ResizeUIComponent = Ember.Component.extend({

    didInsertElement: function() {
        this.$().hide();   // make the component invisible, probably better to do it with css but this is a quick example
        appUI.onResize();
    }

});

并将此组件添加到您希望在每次加载时调用 onResize() 的所有模板（包括应用程序）：

{{top-header}}

{{background-image image=backgroundImage}}

{{side-menu session=session menuOpen=menuOpen}}

<div id="container" class="vert-center route-name"> 

    {{resize-ui}}  {{!-- add the invisible resize component as the child of #container to ensure necessary rendering order --}}    

    {{partial "_logo"}}         

    {{some-component}}

</div>

并且您可以在 ApplicationController 的 init 事件之后在 window 对象上添加侦听器：

App.ApplicationController = Ember.Controller.extend({
    onInit: function() {
        Ember.$(window).resize(function() {     // setup resize listener on the window object that will be called when window resizes
            appUI.onResize();
        });
    }.on('init');
});

Ember - 在加载、转换和调整大小时调整大小 DIV？

Ember - Resize DIV on load, transition and resize?

javascript

jquery

resize

ember.js

Here is a running jsFiddle example