4

3つのアウトレットで構成されるアプリケーションビューがあります。

<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 に答える