1

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

这第一次工作正常，但是在切换布局时内容消失了。这似乎与您简单地重新渲染应用router.get('applicationView').rerender()程序视图（

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

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

1 回答 1

2

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

于 2012-10-24T15:45:43.373 回答