4

我有由三个出口组成的应用程序视图：

<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 次。

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

4

1 回答 1

2

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

于 2012-11-12T06:02:56.430 回答