Question

我的应用程序视图包含三个出口：

<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，因此增强代码会执行三次。

路由转换完成后是否有可靠的方法来执行增强代码，并使用当前数据呈现和更新所有受影响的视图？

Answer 1

我最近添加了一些有用的东西，一个afterRender队列。请参阅this commit，特别是有关使用示例的测试。

在ember.js中是否有回调，在状态转换后呈现所有视图后，我可以使用它来运行代码？

1 个答案: