我有由三个出口组成的应用程序视图:
<script type="text/x-handlebars" data-template-name="application">
{{outlet header}}
{{outlet content}}
{{outlet footer}}
</script>
呈现自己的观点(简化):
<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>
和应用程序路由器,它使用路由逻辑刷新视图
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 });
}
})
})
})
这一切都很好,除了一件事 - 应用程序使用 jQuery Mobile,并且在重新渲染视图后,我需要对更新的元素应用 jqm 增强。我尝试didInsertElement
在每个视图中使用回调来增强已重绘的部分。但它没有按预期工作,因为 jqm 对页眉和页脚块进行了非常特殊的处理。.trigger('pagecreate')
除非通过使用或.page('destroy').page()
在根应用程序视图上使用重新初始化所有页面,否则它们不会得到适当的增强。
问题是 - 每个视图都调用自己的didInsertElement
,因此增强代码执行了 3 次。
在完成路由转换并使用当前数据渲染和更新所有受影响的视图后,是否有可靠的方法来执行增强代码?