I am trying to dynamically switch between layouts in Ember.js, having one output named layout in ApplicationView and several layout classes with an unnamed output inside it. See This JSfiddle: http://jsfiddle.net/ElteHupkes/SFC7R/2/ .
This works great the first time, however, when you switch the layout, the content disappears. This is similar to the same problem that occurs when you simply re-render the application view ( router.get('applicationView').rerender() ), which makes this question somewhat related to my previous one: Re-rendering ApplicationView with output .
I would say that as the controller bindings remain unchanged, an unnamed socket should still be plugged in, and so the contents of the internal view should be displayed. I hope someone can enlighten me why they are not :).
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();
source share