我有由三个出口组成的应用程序视图:
<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
,因此增强代码执行了三次。
在路由转换完成并且所有受影响的视图都使用当前数据渲染和更新后,是否有可靠的方法来执行增强代码?