これはそれを行う1つの方法であり、一般的な解決策です。
呼び出しからpromiseを返すsetupResource
と、リソースの準備ができるまでビューのレンダリングを延期できます。
さらに、rendering
メソッドからイベントをトリガーして、ビューのレンダリングが完了したことを通知することもできます。
render: function(){
var listofajaxcall = setupResource(); //returns array of ajax call
var self = this;
$.when(listofajaxcall){
}.done(){
self.rendering();
}
},
rendering: function(){
//do something
// after it's done...
this.trigger("rendered");
}
これにより、レンダリングされたイベントをリッスンし、ビューがレンダリングされた後に実行する必要のある追加のコードを呼び出すことができます。
私が好むもう1つの方法は、ビューの外部にコードを設定して、ビューが非同期コードを処理する必要がないようにすることです。
var foo = {
bar: function(){
var listofajaxcall = setupResource();
var self = this;
$.when(listofajaxcall).then(someResource){
var view = new MyView({
someResource: someResource
});
view.render();
$("#whatever").html(view.el);
}
}
}
foo.bar();
このバージョンのコードでは、ビューは非同期であることについて何も知りません。それを知っているのは、アプリ内のロジックの流れを制御するコードです。これの欠点は、画面に「読み込み中...」というメッセージを表示する場合は、最初に別のビューをレンダリングする必要があることです。これは、実行される作業の流れをより明確にするため、IMOの価値があります。