我正在构建一个 JQM/Phonegap 应用程序并且有一个烦人的问题。
我有一个页面显示来自 websql/sqllite 数据库的数据，只有 2-3 个字段（#view?id=123）。第一次查看此页面时，一切正常（我抓取数据并将值添加到 JQM pagebeforeshow 事件中的字段）。
如果您再次查看该页面以获取不同的记录 (#view?id=234)，则会出现此问题。它显示带有最后看到的数据的页面，然后在大约 1-2 秒后将其更新为当前记录的值。
有什么方法可以阻止此页面缓存（这是问题所在 - 我没有使用任何 JQM 缓存数据属性）还是应该尝试清空 pagehide 事件中的字段？
提前致谢。
讨论的示例代码：
$('#view').live('pagebeforeshow', function(event, data) {
// Clear any interval counter
clearInterval(window.viewTimerIntervalID);
// On page load get passed url vars
if ($.mobile.pageData && ($.mobile.pageData.caseRef || $.mobile.pageData.id)){
if ($.mobile.pageData.caseRef) {
$('input#edit-case-ref').val($.mobile.pageData.caseRef);
}
if ($.mobile.pageData.id) {
$('input#edit-recordId').val($.mobile.pageData.id)
}
}
// Grab record ID from hidden field
var editId = $('input#edit-recordId').val();
// form fields
var caseTypeSelect = $('select#edit-case-type-select'),
taskTypeSelect = $('select#edit-task-type-select'),
caseRef = $('input#edit-case-ref'),
notes = $('textarea#edit-notes'),
editTimer = $('#edit-time h1'),
startButton = $('#editStartStopRecording'),
findCaseRef = $('a#findCaseRef');
var startButtonTextSpan = $('#editStartStopRecording').prev('span').find('span.ui-btn-text');
startButton.button('refresh');
// Empty values of fields
caseTypeSelect.val([]);
taskTypeSelect.val([]);
caseRef.val('');
notes.val('');
editTimer.text("0:00:00");
// Get options for first select
function getCaseTypes(tx) {
tx.executeSql('SELECT * FROM CASETYPES', [],
function(tx,results){
var len = results.rows.length;
// Remove any options already appended.
$('select#edit-case-type-select option').remove();
// Cache CaseType Select
var caseTypeSelect = $('select#edit-case-type-select');
// Append the first empty blank value option
caseTypeSelect.append('<option value="" data-placeholder="true">Select Case Type</option');
for (var i=0; i<len; i++){
// Append Select with details
caseTypeSelect.append('<option value="' + results.rows.item(i).id +'">' + results.rows.item(i).description + '</option>');
}
// Refresh the list to add JQM styles etc
caseTypeSelect.trigger("change");
},
errorCB
);
}
// Get options for second select
function getTaskTypes(tx) {
tx.executeSql('SELECT * FROM ACTIONTYPES', [],
function(tx,results){
var len = results.rows.length;
// Remove any options already appended.
$('select#edit-task-type-select option').remove();
// Cache CaseType Select
var taskTypeSelect = $('select#edit-task-type-select');
// Append the first empty blank value option
taskTypeSelect.append('<option value="" data-placeholder="true">Select Task Type</option');
for (var i=0; i<len; i++){
// Append Select with details
taskTypeSelect.append('<option value="' + results.rows.item(i).id +'">' + results.rows.item(i).description + '</option>');
}
// Refresh the list to add JQM styles etc
taskTypeSelect.trigger("change");
},
errorCB
);
}
// populate the selects with values from DB
function getRecording(tx) {
tx.executeSql('SELECT * FROM RECORDINGS WHERE id=?', [editId],
function(tx,results){
var len = results.rows.length;
for (var i=0; i<len; i++){
// Add values to selects
caseTypeSelect.val(results.rows.item(i).caseTypeId);
taskTypeSelect.val(results.rows.item(i).actionTypeId);
// Store this start date as a global var
window.editStartDate = results.rows.item(i).startDate;
// Add value to inputs
caseRef.val(results.rows.item(i).caseRef);
// Add notes
notes.val(results.rows.item(i).notes);
// Refresh the list to add JQM styles etc
caseTypeSelect.trigger("change");
taskTypeSelect.trigger("change");
// Calculate the time if still recording and start timer
if (!results.rows.item(i).endDate) {
// No end date so still recording....
// Need to work out diff between start and now
// And increment
var start = new Date(results.rows.item(i).startDate);
var end = new Date();
var dateDiff = end.getTime() - start.getTime();
milliSecs = dateDiff
// 1000 milliseconds in a second
msSecs = (1000)
// Convert to seconds
msMins = (msSecs * 60)
// Convert to mins
msHours = (msMins * 60)
// Floor and calc to hours
numHours = Math.floor(milliSecs/msHours)
// Calc Mins
numMins = Math.floor((milliSecs - (numHours * msHours)) / msMins)
// Calc secs
numSecs = Math.floor((milliSecs - (numHours * msHours) - (numMins * msMins))/ msSecs)
// Add leading zeros
if (numSecs < 10){
numSecs = "0" + numSecs
}
if (numMins < 10){
numMins = "0" + numMins
}
// Calc results
timeOnLoad = numHours + ":" + numMins + ":" + numSecs;
// Add to timer
editTimer.text(timeOnLoad);
// Start the incrementor and put the incrementor id in a global var (wuldnt work inside a local var for some reason).
window.viewTimerIntervalID = setInterval(editCount,1000);
// Change the button
startButtonTextSpan.text('Pause');
startButton.buttonMarkup({theme: 'g'}); //Red
startButton.buttonMarkup({icon: 'minus'}); // Swap out for custom icons
// Add the stop class
startButton.addClass('stop');
// Disable all fields as still recording
caseTypeSelect.selectmenu('disable');
taskTypeSelect.selectmenu('disable');
caseRef.textinput('disable');
notes.textinput('disable');
findCaseRef.addClass('ui-disabled');
// Calculate the time if enddate exists
} else {
// There is an end time - so calc diff and append
// Get start and end date, convert to JS date objects and subtract
var start = new Date(results.rows.item(i).startDate);
var end = new Date(results.rows.item(i).endDate);
var dateDiff = end.getTime() - start.getTime();
milliSecs = dateDiff
// 1000 milliseconds in a second
msSecs = (1000)
// Convert to seconds
msMins = (msSecs * 60)
// Convert to mins
msHours = (msMins * 60)
// Floor and calc to hours
numHours = Math.floor(milliSecs/msHours)
// Calc Mins
numMins = Math.floor((milliSecs - (numHours * msHours)) / msMins)
// Calc secs
numSecs = Math.floor((milliSecs - (numHours * msHours) - (numMins * msMins))/ msSecs)
// Add leading zeros
if (numSecs < 10){
numSecs = "0" + numSecs
}
if (numMins < 10){
numMins = "0" + numMins
}
// Calc results
resultString = numHours + ":" + numMins + ":" + numSecs;
// Append data
editTimer.text(resultString);
// Change the button
startButtonTextSpan.text('Resume');
startButton.buttonMarkup({theme: 'f'}); //Green
startButton.buttonMarkup({icon: 'plus'});
// Add the stop class
startButton.addClass('resume');
// Enable all fields as not recording
caseTypeSelect.selectmenu('enable');
taskTypeSelect.selectmenu('enable');
caseRef.textinput('enable');
notes.textinput('enable');
findCaseRef.addClass('ui-enabled');
}
}
},
errorCB
);
}
// Populate select options from DB
db.transaction(getCaseTypes, errorCB);
db.transaction(getTaskTypes, errorCB);
// Populate the fields with record details
db.transaction(getRecording, errorCB);
});
也不确定它是否相关，但我使用的是多页模板（一个html文档中的所有#pages）。再次感谢。