最近、クロージャーと呼び出しをより有効に利用するために、JavaScript をリファクタリングしました。
問題
RadButton クライアントのOnValueChangingイベントに付随するtelerik eventArgument ( )のcancelプロパティ (to ) を設定しても、値がoldValueまたはinitialValueに戻されなくなりました。truee
Paysheet.UI
window.Paysheet.UI.WorkRate = {
"OnValueChanging" : function (sender, e, args) {
/// <summary>Entry-Point Function; initializes and calls 'Paysheet.XHR.POST', evaluates the response; Initializes and invokes the proper RadWindow/RadAlert/RadPrompt</summary>
/// <param name="sender" type="Telerik.Web.UI.RadTextBox">The Telerik Control that raises the event</param>
/// <param name="e" type="Telerik.Web.UI.InputValueChangingEventArgs">The Telerik Event</param>
/// <param name="args" type="JSON">JSON that is to be processed by the handler, and posted</param>
args = Paysheet.Common.GetDataKeyValues(sender);
args.RequestorID = window.Paysheet.Requestor.ID;
//args.AuthToken = window.Paysheet.Requestor.AuthToken;
args.Scope = "PaysheetItem";
args.PaysheetItemScope = "PayRate";
args.RateType = "WorkRate";
args.Rate = e.get_newValue();
args._uri = "Paysheet/" + args.PayPeriodEmployeeID + "/PayRate/Modify";
console.log("(1st) XHR POST => args: %o", args);
return Paysheet.Common.Func(Paysheet.Common.OnValueChangingResultHandler, sender, e, args);
}
};
上記のコードは、次のようにRadTextBox OnValueChanging EventHandlerから呼び出されます。
"valueChanging": function(sender, e) {
args = {};
console.log(" [EventOccurring] - sender: %o - e: %o - args: %o", sender, e, args);
e._cancel = !(Paysheet.UI.WorkRate.OnValueChanging(sender, e, args));
}
Paysheet.XHR
window.Paysheet.XHR = {
"POST": function (uri, jsonData) {
/// <summary>Encapsulates the XmlHttpRequest object; posts the given data (JSON string) to a specified handler page and returns the JSON object</summary>
/// <param name="url" type="String">URI</param>
/// <param name="jsonData" type="String">JSON Data to be posted</param>
uri = uri || jsonData._uri;
var xhr = new XMLHttpRequest();
xhr.open("POST", uri, false); // synchronous call
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(jsonData));
return (xhr.status == 200) ? JSON.parse(xhr.response) : { "isValid": false, "StatusCode": 500 };
}
};
Paysheet.共通
window.Paysheet.Common = {
"Func": function (func, sender, e, args) {
console.log("Call to func..");
var result = func(sender, e, args, (Paysheet.XHR.POST(args._uri, args) || { "isValid": false, "isOverrideable" : false, "StatusCode": 500 }));
console.log("result of call: %o", result);
return result;
},
"GenericResultHandler": function (result, handlers) {
result = result || { "isValid": false, "isOverrideable": false, "StatusCode": 500 };
if (result.StatusCode != 200) {
console.log("[ERROR] - [RadAlert] Invoked...");
//the result.message show be more domain specific.
radalert(result.message || "Internal Error Occurred!", 400, 350, result.title || "Alert - Error", null, null);
} else if (result.isValid) {
console.log("[APPROVED]");
handlers.approve();
return true;
} else if (result.isOverrideable) {
console.log("[OVERRIDE] - [RadPrompt] Invoked...");
handlers.override();
} else {
console.log("[REJECTED] - [RadAlert] Invoked...");
handlers.reject();
//the result.message show be more domain specific.
radalert(result.message || "The state of this data prevents any modifications; Overriding is not an option.",
400, 350,
result.title || "Alert - Denied",
null, null);
}
// ultimately, the caller will be a cancelable telerik event.
// by convension, the result is inverted/flipped: thus, this resolves to 'e.set_cancel = !([return])'
// note: override will have to set the value explicitly without triggering this event in the (presumed) asynchronous method call to 'handlers.override';
return false;
},
"GenericOverrideResultHandler": function (result, handlers) {
result = result || { "isValid": false, "StatusCode": 500, "isOverrideable" : false };
if (result.StatusCode != 200) {
console.log("[OVERRIDE ERROR] - [RadAlert] Invoked...");
radalert(result.message || "Internal Error Occurred!", 400, 350, result.title || "Alert - Error", null, null);
} else if (result.isValid) {
console.log("[OVERRIDE APPROVED]");
handlers.approve();
} else {
console.log("[OVERRIDE REJECTED] - [RadAlert] Invoked...");
//the result.message show be more domain specific.
radalert(result.message || "Override was denied, no modification made to stored data!", 400, 350, result.title || "Alert - Override Denied", null, null);
handlers.reject();
}
},
"OnValueChangingResultHandler": function (sender, e, args, result) {
return Paysheet.Common.GenericResultHandler(result, { "approve": approve, "override": override, "reject": reject });
function approve() {
var d = Paysheet.Common.GetDataKeyValues(sender);
var DaysCell = sender.get_parent().get_cell("Days");
if (DaysCell["set_value"]) {
DaysCell.set_value(result.content.Days);
} else {
DaysCell.innerHTML = result.content.Days;
}
var GrossCell = sender.get_parent().get_cell("Gross");
if (GrossCell["set_value"]) {
GrossCell.set_value(result.content.Gross);
} else {
GrossCell.innerHTML = result.content.Gross;
}
}
function override() {
radprompt(result.message, callback, 400, 350, null, result.title || "Prompt - Override", false);
function callback(promptArgs) {
promptArgs = promptArgs || { "override": false, "note": "" };
if (promptArgs.override && promptArgs.note.length > 0) {
args.Override = promptArgs.override;
args.OverrideNote = promptArgs.note;
console.log("(2nd) XHR POST [start] => args: %o", args);
var result = Paysheet.XHR.POST(args._uri, args);
console.log("(2nd) XHR POST [finished] - results: %o", result);
if ((result) ? result.isValid : false) {
console.log("[SUCCESS]");
sender._setNewValue(e.get_newValue());
var d = Paysheet.Common.GetDataKeyValues(sender);
//Update Gross;
var DaysCell = sender.get_parent().get_cell("Days");
if (DaysCell["set_value"]) {
DaysCell.set_value(result.content.Days);
} else {
DaysCell.innerHTML = result.content.Days;
}
var GrossCell = sender.get_parent().get_cell("Gross");
if (GrossCell["set_value"]) {
GrossCell.set_value(result.content.Gross);
} else {
GrossCell.innerHTML = result.content.Gross;
}
} else {
console.log("[FAILED]");
sender._SetValue(sender._initialValueAsText);
sender.updateDisplayValue();
if (result.StatusCode == 200) {
console.log("... Denied [RadAlert] Invoked...");
radalert(result.message || "Override request denied!", 400, 350, result.title || "Alert - Override Denied", null, null);
} else //if (result.StatusCode == 500)
{
console.log("... Error [RadAlert] Invoked...");
radalert(result.message || "Internal Error Occurred!", 400, 350, result.title || "Alert - Error", null, null);
}
}
} else {
// ensuring the control retains the same value; for the prompt is async;
sender._SetValue(e.get_oldValue());
sender.updateDisplayValue();
}
}
}
function reject() {
// neither of the following lines should be necessary, for the GenericResultHandler returns true|false to `e._cancel`
// sender._SetValue(e.get_oldValue()); //This line works
// e._cancel = true; //This line does not work
}
}
};
このコードをステップ実行して、テレリックのコードに入りました。_SetValueを使用して呼び出しているようです_initialValueAsText。実際には申し込んでいないようです。
「拒否」関数でイベントのキャンセル プロパティを明示的に設定した場合。同じ問題が発生します。
送信者の値を明示的に古い値に設定すると、機能します。
編集：行（同期呼び出し）をコメントアウトしました-関数をxhr.send強制POST的に返す{ "isValid" : false, "isOverrideable" : false, "StatusCode": 500 }-問題は解決しません。