装载记事内容到记事页面
下面，我们看下如何装载记事到记事编辑器中。当用户在记事列表中点某个记事时，我们分为下面几个步骤进行设计：
在notesList数组中，根据在链接中的li元素中的id去找出对应的记事。
在编辑界面的标题和内容文本框中，将读取到的记事的标题和内容放置到相应的文本框中。
最后让记事编辑器页面处于激活状态
而如果用户是点新建记事按钮，则执行相类似的步骤，只不过不用先根据notedid在记事列表中找出对应的记事而已，而是直接获得用户提交的记事标题和内容再予以保存。下面先看下如何实现装载已有的记事内容到记事编辑页中。
首先，我们要在控制器的声明部分中，定义如下的页面变量：
var noteEditorPageId = "note-editor-page";
接下来，我们在onPageChange()方法中编写相关的事件处理代码，专门用于处理在记事列表页面跳转到记事编辑页面：
var toPageId = data.toPage.attr("id");
var fromPageId = null;
if (data.options.fromPage) {
fromPageId = data.options.fromPage.attr("id");
}
switch (toPageId) {
case notesListPageId:
resetCurrentNote();
renderNotesList();
break;
case noteEditorPageId:
if (fromPageId === notesListPageId) {
renderSelectedNote(data);
}
break;
}
};
下面解析下上面的代码，其中我们定义了fromPageId这个参数，今后我们简称为源页面，而toPageId则称之为目标页面。其中fromPageId的值会判断是否在记事编辑界面中加载记事内容：
renderSelectedNote(data);
}
这段代码判断了如果源页面来自记事列表页面，则通过renderSelectedNote方法读取具体的某个记事内容(这个方法稍后编写)。要注意的是，在应用启动后，pagechange 事件就发生了，但这个时候源页面为空，所以必须通过下面的代码，首先获得页面的id,如下：
fromPageId = data.options.fromPage.attr("id");
}
接下来，我们编写核心的从记事列表中装载记事的代码，即renderSelectedNote方法：
var u = $.mobile.path.parseUrl(data.options.fromPage.context.URL);
var re = "^#" + noteEditorPageId;
if (u.hash.search(re) !== -1) {
var queryStringObj = queryStringToObject(data.options.queryString);
var titleEditor = $(noteTitleEditorSel);
var narrativeEditor = $(noteNarrativeEditorSel);
var noteId = queryStringObj["noteId"];
if (typeof noteId !== "undefined") {
var notesList = dataContext.getNotesList();
var notesCount = notesList.length;
var note;
for (var i = 0; i < notesCount; i++) {
note = notesList[i];
if (noteId === note.id) {
titleEditor.val(note.title);
narrativeEditor.val(note.narrative);
currentNote = note;
}
}
} else {
//新建一个记事，设置标题文本框和记事文本框初始内容为空
titleEditor.val("");
narrativeEditor.val("");
}
titleEditor.focus();
}
};
在上面的代码中，首先判断来源页面是否为记事列表页面，其中使用了如下的通过正则表达式的方法判断：
var re = "^#" + noteEditorPageId;
if (u.hash.search(re) !== -1) {
… }
这里通过了jQuery Mobile的parseUrl方法(见http://jquerymobile.com/test/docs/api/methods.html)首先获得了来源的URL，存放到变量u中，并且通过正则表达式的判断方法进行判断。接着我们创建一个对象，用来存放相对应的来源URL，这通过一个助手类queryStringToObjec
t来实现，代码如下：
var queryStringObj = {};
var e;
var a = /\+/g;
var r = /([^&;=]+)=?([^&;]*)/g;
var d = function (s) { return decodeURIComponent(s.replace(a, " ")); };
e = r.exec(queryString);
while (e) {
queryStringObj[d(e[1])] = d(e[2]);
e = r.exec(queryString);
}
return queryStringObj;
};
然后在使用时，通过var queryStringObj = queryStringToObject(data.options.queryString);进行调用，获得的是上一个页面传进来的字符串参数对象，再通过var noteId = queryStringObj["noteId"];获得了要查看编辑的记事的notedId。再来分析以下这段代码：
var notesList = dataContext.getNotesList();
var notesCount = notesList.length;
var note;
for (var i = 0; i < notesCount; i++) {
note = notesList[i];
if (noteId === note.id) {
currentNote = note;
titleEditor.val(currentNote.title);
narrativeEditor.val(currentNote.narrative);
}
}
} else {
titleEditor.val("");
narrativeEditor.val("");
}
这里首先判断notedId是否已定义，如果不为空且已定义，则证明为加载编辑记事，通过dataContext数据模块加载记事列表，然后通过循环找出notedId为要查看记事id的记事
，注意这里使用currentNode变量保存了要查看的notes对象，这样就为后面增加和删除提供了方便，不用再次在noteList数组中再寻找。
运行后，当点记事列表中的某个记事时，则会出现具体的记事内容，如下图：
