javascript - 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 包装了整个当前 View 。但是随着 Ember 远离 View ，我应该怎么做？

我想出的唯一方法是使用 View ，并连接到 didInsertElement，但我不知道如何在无需创建 view.js 文件的情况下做到这一点每条路线都包含相同的调整大小代码？调整大小事件怎么样？我认为应用程序 View 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调整大小几乎可以按照您描述的方式完成。

一种简单的方法是覆盖 renderTemplate ApplicationRoute内的钩子(Hook)。在此 Hook 中，您可以呈现应用程序模板，然后初始化 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
});

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

Here is a running jsFiddle example

<小时/>

编辑

而不是覆盖 renderTemplate钩子(Hook)，实现此目的的另一种方法是创建一个 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 上添加监听器init 之后的对象事件ApplicationController :

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