Ember.js：使用插座动态切换布局

Question

我试图在 Ember.js 中的布局之间动态切换，方法是在 ApplicationView 中有一个名为 layout 的插座，以及在其中有一个未命名的插座的几个布局类。 请参阅此 JSfiddle：http://jsfiddle.net/ElteHupkes/SFC7R/2/。

这在第一次运行良好，但是在切换布局时内容消失了。这似乎与您简单地重新渲染应用程序视图 (router.get('applicationView').rerender()) 时出现的问题相同，这使得这个问题与我之前的另一个问题有些相关：Re-rendering ApplicationView with outlet。

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

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

Answer 1

我认为由于潜在的泄漏原因，当您切换插座时，前一个视图（及其所有子视图都被破坏。因此您必须重新连接匿名插座才能填充它。