私が持っている次の Javascript コードには、ある種のコンテキストの混乱があることを理解しています。
この問題が発生した理由と問題の解決方法を説明してもらえますか?
Model と呼ばれるクラスがあり、うまく機能しているようです。このクラスには update() というメソッドがあります。これにより、バックエンドへの AJAX 呼び出しが実行され、返された JSON が解析されます。ここで問題が発生します。正しいクエリがバックエンドに送信され、正しい JSON が返されます。ただし、解析中に、両方のモデル間で何らかの衝突またはコンテキストの問題が発生します。
View という別のオブジェクトを介して update 関数を呼び出します。この View オブジェクトには、モデル (Model のインスタンス) のリストがあります。次に、ビューは各ビューの各更新関数を呼び出します。これは、返されたデータが解析されるまでうまく機能します。
コメントで述べたように、データ オブジェクトの例を次に示します (手動で再作成したため、コンソールからコピーする方法がわかりませんでした)。このオブジェクトは、インデックス 0 にすべてのエントリを持っていない可能性があることに注意してください (たとえば、次の場合、TLM_NO が欠落している可能性があります)。さらに、返された行数 (この場合は「0」のみが異なります)。update 関数の目的の一部は、これを検出し、何もない場合に DOM の正しい部分に「N/A」を入力することです。
{valid: true,
0: {'TLM_NO': '00000', 'TLM_NAME': 'YYY-14 Tlm Rel 19'}}
次のコードでは、「/!\ HERE /!\」というコメントがある行まではすべて問題ありません。
this.update = function(dbi) {
console.log('Updating model ' + this.name + '.');
var modelObj = this; // This is used to have a reference to 'this' Model while in other contexts.
if (this.columns.length == 0) {
/* Let's build all the columns */
$("[id^='" + this.ref + "']").each(function() {
var colName = $(this).attr('id').split('-')[1];
if (modelObj.columns.indexOf(colName) == -1) {
modelObj.columns.push(colName);
}
});
}
/* Let's build the bindings. */
var allBindings = {};
for (placeholder in this.bindings) {
allBindings[placeholder] = this.bindings[placeholder].val();
}
$.post(path + 'inc/fetch.php', {
dbi : dbi,
table : this.table,
columns : btoa(this.columns),
limit : this.limit,
offset : this.offset,
distinct : this.distinct,
where : btoa(this.where),
bindings : btoa(JSON.stringify(allBindings))
}, function(data) {
if (!data.valid) {
$("#userError>p>span.userMessage").html(data.msg);
$("#userError").dialog({
width : 500,
buttons : {
'Dismiss' : function() {
$(this).dialog("close");
}
}
});
} else {
/* The data returned by the backend is simply JSON data with the key-value pair. There is one key per row returned. */
var numRows = 0; // /!\ HERE /!\ Starting here, displaying the data variable will always display the first of two objects.
for ( var rowID in data) {
if (rowID == 'valid')
continue;
numRows++;
for (column in data[rowID]) {
console.log('[' + modelObj.str() + '] setting #' + modelObj.ref + '-' + column + ' to [' + data[rowID][column] + ']');
var el = $('#' + modelObj.ref + '-' + column);
var val = data[rowID][column];
switch (el[0].nodeName) {
case "SELECT":
el.html('<option val="' + val + "'>" + val + "</option>");
break;
case "TD":
el.text(val);
break;
case "INPUT":
el.val(val);
break;
default:
console.log('Dont know how to display "' + val + '"!');
}
}
}
if (numRows < modelObj.columns.length) {
for ( var cNo in modelObj.columns) {
var column = modelObj.columns[cNo];
console.log("col = " + column);
console.log('data');
console.log(data);
console.log('columns');
console.log(modelObj.columns);
console.log('[0] of ' + '#' + modelObj.ref)
var par = $('#' + modelObj.ref).nodeName;
var el = $('#' + modelObj.ref + '-' + column);
var val = data[0][column];
switch (par) {
case "SELECT":
el.html('<option val="' + val + "'>" + val + "</option>");
break;
case "TABLE":
var limit = $('#' + modelObj.ref + ">tr").length - 1; // The first line (tr) is the header.
for ( var missingRow in limit) {
if (data.hasOwnProperty(missingRow) == 0 || data[missingRow].hasOwnProperty(column) == 0) {
console.log('[' + modelObj.str() + '] setting #' + modelObj.ref + '-' + column + ' to [N/A]')
$('#' + modelObj.ref + '-' + column + '-' + missingRow).text('N/A');
}
}
break;
case "INPUT":
el.val(val);
break;
default:
console.log('Dont know how to display "' + val + '"!');
}
}
}
}
}, "json");
};
どんな考えも役に立ちます。前もって感謝します。