ここ数日、かなりイライラする問題を解決しようとしてきましたが、ついに敗北を認め、SO に訴えます。
最初に、私がやろうとしていることの概要を説明し、次に問題が発生している場所の詳細を説明します。
目標: ユーザーがフォームに入力しているときに、フォームのいずれかの要素が変更され、ユーザーが変更を保存せずにフォームを離れようとすると、モーダルに次のメッセージが表示されます。
このレコードに変更を加えました。変更を保存しますか?
ユーザーは、はい/いいえ/キャンセルのオプションを取得します。
ユーザーが選択した場合:
はい:レコードを保存して、最初に意図したルートに移動します。
いいえ:レコードは保存されず、ユーザーは目的のルートに移動する必要があります。
キャンセル:モーダルを閉じる必要があり、ユーザーはルートを変更せずに現在のページに留まります。
ルート変更が発生する前に、 backbone.routefilterライブラリを使用してルート変更を検出しています。
問題:
initialize
この問題を解決するために、フォームを含むビューのメソッド内にルート変更リスナーを配置しました。以下はそのコードです:
// If the user tries go to a different section but the record has been changed, confirm the user action
app.circulationRouter.before = function( route, params ) {
app.fn.clearNotifications();
if(app.recordChanged){
var confirmView = new app.views.confirm({
header:"Patron Record Changed",
bodyText:"You have made changes to this record. Do you want to save the changes?",
trueLabel:"Yes",
falseLabel:"No",
cancelLabel:"Cancel",
hasTrue:true,
hasFalse:true,
hasCancel:true,
trueCallback:function(){
// Ignore the patron record change
_this.saveRecord();
// Render the patron section AFTER the save
_this.model.on({
'saved' : function(){
// Render the new seciton
app.circulationRouter.renderPatronSection(_this.model, params[1]);
app.currentPatronSection = params[1];
// Set the record changed to false
app.recordChanged = false;
// Remove the 'before' listener from the circulationRouter
app.circulationRouter.before = function(){};
if(con)console.log('in saved');
// Remove the listener
_this.model.off('saved');
},
'notsaved' : function(){
// Stay on the patron record page, keep the url at record
app.circulationRouter.navigate("patrons/"+_this.model.get('PatronID')+"/record",false);
_this.model.off('notsaved');
}
}, _this);
},
falseCallback:function(){
if(con)console.log(params);
if(params.length){
// Ignore the patron record change
app.circulationRouter.renderPatronSection(_this.model, params[1]);
app.currentPatronSection = params[1];
}else{
if(con)console.log('blah');
setTimeout(function(){
if(con)console.log('should navigate');
app.circulationRouter.navigate("", true);
}, 5000);
}
app.recordChanged = false;
app.circulationRouter.before = function(){};
},
cancelCallback:function(){
// Stay on the patron record page, keep the url at record
app.circulationRouter.navigate("patrons/"+_this.model.get('PatronID')+"/record",false);
}
});
app.el.append(confirmView.render().el);
return false;
}
};
3 つのオプションのそれぞれには、結果を制御する初期化関数内で呼び出されるコールバックがあります。[キャンセル] ボタンは常に正しく動作します。私が直面している問題は、ユーザーがホームページに移動したいとき、つまりこの行が呼び出されたときですapp.circulationRouter.navigate("", true);
。ナビゲートするための新しく定義されたルートがある場合、他のすべては正しく機能します。
問題を作成する一連のイベントは次のとおりです。
1) レコードを変更する
2) ホームページに移動してみる
3) ルートはホームページのルートに変更されますが、記録は引き続き表示されます
4) モーダルは 3 つのオプションで自動的に表示されます
5)いいえボタンを選択
6) falseCallback がトリガーされる
7) モーダルが閉じられ、ビューは記録ページに残りますが、ブラウザーに表示されるルートはホームページ用です
#7 の予想される動作は、ホームページのビューを表示することでしたが、それを反映しているのは URL のみです。falseCallback
DOM の問題ではないことを確認するために、リダイレクトのトリガーを遅らせてみましたが、うまくいきませんでした。
何が起こっているのか知っている人はいますか?