I have an application view consisting of three outputs:
<script type="text/x-handlebars" data-template-name="application"> {{outlet header}} {{outlet content}} {{outlet footer}} </script>
who make their own views (simplified):
<script type="text/x-handlebars" data-template-name="header"> <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext" {{action changeDate view.prevDate href=true}}>Prev</a> {{view.model.weekDay}} <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="notext" {{action changeDate view.nextDate href=true}}>Next</a> </script> <script type="text/x-handlebars" data-template-name="content"> {{view.model.month}} </script> <script type="text/x-handlebars" data-template-name="footer"> {{view.model.day}} </script>
and an application router that updates views using routing logic
Router: ember.Router.extend({ root: ember.Route.extend({ changeDate: ember.State.transitionTo('date'), index: ember.Route.extend({ route: '/', connectOutlets: function (router) { router.transitionTo('date', new Date()); } }), date: ember.Route.extend({ route: '/:date', serialize: function (router, date) { return { date: toUrlString(date) }; }, deserialize: function (router, param) { return parseUrlString(param.date); }, connectOutlets: function (router, date) { var appController = router.get('applicationController'), controller = router.get('dayController'); controller.navigateTo(date || new Date()); appController.connectOutlet({ outletName: 'header', viewClass: router.namespace.HeaderView, controller: controller }); appController.connectOutlet({ outletName: 'content', viewClass: router.namespace.ContentView, controller: controller }); appController.connectOutlet({ outletName: 'footer', viewClass: router.namespace.FooterView, controller: controller }); } }) }) })
Everything works fine, except for one - the application uses jQuery Mobile, and after re-rendering the views, I need to apply jqm enhancements to the updated elements. I tried using the didInsertElement in each view to improve the part that was redrawn. But this does not work as expected, because jqm has a very special relationship to the header and footer blocks. They are not improved properly unless all pages are initialized using .trigger('pagecreate') or using .page('destroy').page() in the root application view.
The problem is that each view calls its own didInsertElement , so the extension code is executed three times.
Is there a reliable way to execute the extension code after the route transition is complete, and all affected views are displayed and updated with current data?