Question

我正在尝试通过在ApplicationView中使用一个名为layout的插座来动态切换Ember.js中的布局，以及在其中有一个未命名的插座的几个布局类。看到这个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

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

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

1 个答案: