Question

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

在正常网站上，我会这样做：

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文件的情况下这样做，包含相同的调整大小代码？那个resize事件怎么样？我认为应用程序视图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挂钩。在此钩子中，您可以呈现应用程序模板，然后在resize对象上初始化window侦听器：

// 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>

您可以在window的{{1}}事件后在init对象上添加一个监听器：

ApplicationController

灰烬 - 在加载，转换和调整大小时调整DIV大小？

1 个答案:

Here is a running jsFiddle example