Ember.js：使用插座动态切换布局 [英] Ember.js: Dynamically switching layouts with outlets

问题描述

我正在尝试在Ember.js中动态切换布局，方法是在ApplicationView中创建一个名为layout的插座，并在其中包含多个未命名的插座。
参见此JSfiddle： http://jsfiddle.net/ElteHupkes/SFC7R/2/ 。

I'm trying to dynamically switch between layouts in Ember.js by having one outlet named layout in ApplicationView, and several layout classes with an unnamed outlet inside of it. See this JSfiddle: http://jsfiddle.net/ElteHupkes/SFC7R/2/.

第一次运行良好，但是切换布局后内容就会消失。当您仅重新渲染应用程序视图（ router.get（'applicationView'）。rerender（））时，似乎出现了相同的问题，从而使该问题有所增加与我之前的另一本书有关：使用插座重新渲染ApplicationView 。

This works fine the first time, however upon toggling the layout the content disappears. This seems to be the same problem that occurs when you simply re-render the application view (router.get('applicationView').rerender()), making this question somewhat related to my other one earlier: Re-rendering ApplicationView with outlet.

我想说的是，由于控制器绑定保持不变，未命名的插座仍应连接，因此内部视图内容应呈现。我希望有人能启发我为什么他们不是：）。

I would say that as the controller bindings stay the same, the unnamed outlet should still be connected and the inner view contents should thus be rendered. I'm hoping someone can enlighten me as to why they aren't :).

HTML：

<script type="text/x-handlebars" data-template-name="application">
  {{outlet layout}}
  <a href="#" {{action doToggleLayout}}>Toggle layout</a>
</script>

<script type="text/x-handlebars" data-template-name="layout1">
  <h1>Layout 1</h1>
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="layout2">
  <h1>Layout 2</h1>
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  Page contents.
</script>

JS：

App = Ember.Application.create({
    autoinit: false,
    Router: Ember.Router.extend({
        root: Em.Route.extend({
            index: Em.Route.extend({
                route: '/',
                connectOutlets: function(router) {
                    // Fire toggle once as an initializer
                    router.send('doToggleLayout');

                    router.get('applicationController').connectOutlet('index');
                }
            }),

            doToggleLayout: function(router) {
                this.set('layoutClass', this.get('layoutClass') == App.Layout2View ? App.Layout1View : App.Layout2View);

                router.get('applicationController').connectOutlet({
                    viewClass: this.get('layoutClass'),
                    outletName: 'layout'
                });
            }
        })
    }),

    ApplicationView: Em.View.extend({
        templateName: 'application'
    }),

    ApplicationController: Em.Controller.extend({})
});

App.IndexView = Em.View.extend({
    templateName: 'index'
});
App.Layout1View = Em.View.extend({
    templateName: 'layout1'
});
App.Layout2View = Em.View.extend({
    templateName: 'layout2'
});
App.set('layoutClass', App.Layout2View);
App.initialize();

推荐答案

我认为由于潜在的泄漏原因，当您切换出口，以前的视图（及其所有子视图均已销毁。因此，您必须重新连接匿名出口才能填充它。）

I think for potential leaks reason, when you switch the outlet, the previous view (and all of its subviews are destroyed. So you have to reconnect the anonymous outlet in order to fill it.

这篇关于Ember.js：使用插座动态切换布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！