routing – 在ember.js中是否有一个回调函数,我可以在状态转换后呈现所有视图后运行代码？

2019年8月4日 170次阅读

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

<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,因此增强代码执行三次.

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

最佳答案 我最近添加了一些有用的东西,一个afterRender队列.请参阅
this commit,特别是测试用例.

点赞