在ember.js中是否有回调，可以在状态转换后渲染所有视图后运行代码？ [英] Is there a callback in ember.js which I can use to run code after all views are rendered after state transition?

问题描述

我有三个网点的应用视图：

I've got application view consisting of three outlets:

<script type="text/x-handlebars" data-template-name="application">
        {{outlet header}}
        {{outlet content}}
        {{outlet footer}}
</script>

它呈现自己的观点（简化）：

which render 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 application router which refreshes the 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 });
            }
        })
    })
})

这一切都可以正常工作，除了一件事情 - 应用程序使用jQuery Mobile，并且在视图重新呈现之后，我需要对更新的元素应用jqm增强。
我尝试在每个视图中使用 didInsertElement 回调，以增强已重绘的部分。但是它不能像预期的那样工作，因为jqm对页眉和页脚块有非常特殊的处理。除非通过使用 .trigger（'pagecreate'）或使用 .page（'destroy'）重新初始化所有页面，否则它们没有被正确增强）

This all works fine except of one thing - the application uses jQuery Mobile, and after views re-rendered I need to apply jqm enhancements to the updated elements. I tried using didInsertElement callback in each view to enhance the part that has been redrawn. But it doesn't work as expected because jqm has very special treatment of the header and footer blocks. They are not properly enhanced unless all page is re-initialized either by using .trigger('pagecreate') or by using .page('destroy').page() on the root application view.

问题是 - 每个视图调用自己的 didInsertElement ，所以增强代码执行三次。

The issue is - each view calls its own didInsertElement, so the enhancement code executes three times.

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

Is there a reliable way to execute the enhancement code after route transition is finished and all affected views are rendered and updated with the current data?

推荐答案

我最近添加了一些有助于此的afterRender队列。请参阅此提交，特别是使用示例的测试。

I recently added something that will help with this, an afterRender queue. See this commit, in particular the test for an example of usage.

这篇关于在ember.js中是否有回调，可以在状态转换后渲染所有视图后运行代码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！