I think this is what you want:
Routers:
App = Ember.Application.create({ ApplicationController: Ember.ObjectController.extend(), CustomerController: Ember.ObjectController.extend(), Router: Ember.Router.extend({ root: Ember.Route.extend({ index: Em.Route.extend({ route: '/', connectOutlets: function(router) { router.route('/customer/CN-001'); } }), customer: Em.Route.extend({ route: '/customer/:customernumber', connectOutlets: function(router, customer) { router.get("applicationController").connectOutlet('customer', customer); }, serialize: function(router, context){ return { id: context.number }; }, deserialize: function(router, params) { return Ember.Object.create({ number: params.customernumber }); } }) }) }) }); App.CustomerView = Ember.View.extend({ templateName: 'customer' })
Templates:
<script type="text/x-handlebars" data-template-name="application"> {{outlet}} </script> <script type="text/x-handlebars" data-template-name="customer"> <h2>Customer</h2> {{number}} </script>
Here is a jsfiddle showing this work. Hope this helps.
source share