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

Question

我正在构建一个 Ember 应用程序，该应用程序需要在加载应用程序时将容器 DIV 的大小调整为完整的窗口高度，然后在转换到新路由时再次运行相同的调整大小功能，然后在调整窗口大小时也运行。

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

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
});

所有调用都在 AFTER 渲染模板的原因是因为#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');
});