新增加记事内容
接下来我们开始设计新增记事的界面和代码，首先定义一个保存按钮的标识，如下：
var saveNoteButtonSel = "#save-note-button";
并在控制层中的init()方法中如下编写代码：
dataContext.init("Notes.NotesList");
var d = $(document);
d.bind("pagebeforechange", onPageBeforeChange);
d.bind("pagechange", onPageChange);
d.delegate(saveNoteButtonSel, "tap", onSaveNoteButtonTapped);
};
这里通过委托定义了用户在点新增按钮时，将触发onSaveNoteButtonTapped事件，代码如下：
var titleEditor = $(noteTitleEditorSel);
var narrativeEditor = $(noteNarrativeEditorSel);
var tempNote = dataContext.createBlankNote();
tempNote.title = titleEditor.val();
tempNote.narrative = narrativeEditor.val();
if (tempNote.isValid()) {
if (null !== currentNote) {
currentNote.title = tempNote.title;
currentNote.narrative = tempNote.narrative;
} else {
currentNote = tempNote;
}
dataContext.saveNote(currentNote);
returnToNotesListPage();
} else {
//告知用户保存失败，此处代码省略，留待下一讲完成 }
};
在上面的代码中，首先调用了NoteModel的isValid方法，用来判断要新增的记事是否已经完整添写了标题和内容，代码如下：
"use strict";
if (this.title && this.title.length > 0) {
return true;
}
return false;
};
接下来，我们通过观察currentNote变量的值，去判断是否在编辑记事还是新增记事。首先通过dataContext.createBlankNote()创建一个临时的记事对象tempNote,然后在判断输入合法后，判断是否是更新还是新增记事。如果currentNote变量不为空(证明是更新一个已存在的记事)，则将currentNote的标题和内容简介设置为tempNote的标题和内容简介,否则是新增一个空的记事让currentNote设置为等于tempNote。再调用dataContext的saveNote方法，
这个方法还没定义，但我们先在AppSec文件中编写相关的测试用例。
//确认在测试前localstorage被清空
$.jStorage.deleteKey(notesListStorageKey);
var notesList = $.jStorage.get(notesListStorageKey);
expect(notesList).toBeNull();
// 创建一个记事
var dateCreated = new Date();
var id = dateCreated.getTime().toString();
var noteModel = new Notes.NoteModel({
id: id,
dateCreated: dateCreated,
title: ""
});
Notes.dataContext.init(notesListStorageKey);
Notes.dataContext.saveNote(noteModel);
notesList = $.jStorage.get(notesListStorageKey);
var expectedNote = notesList[0];
expect(expectedNote instanceof Notes.NoteModel).toBeTruthy();
// 清除notesListStorageKey)
$.jStorage.deleteKey(notesListStorageKey);
});
测试后结果如图所示：
编写代码如下：
var found = false;
var i;
for (i = 0; i < notesList.length; i += 1) {
if (notesList[i].id === noteModel.id) {
notesList[i] = noteModel;
found = true;
i = notesList.length;
}
}
if (!found) {
notesList.splice(0, 0, noteModel);
}
saveNotesToLocalStorage();
};
由于我们使用的是数组，因此跟传统的数据库保存有点不同，这里可能显得有点复杂。我们遍历整个notesList数组，如果是找到跟要编辑的记事对象，则直接设置found(找到标志)为true,并且覆盖原对象数组的内容，如果found为false,则找不到对象为新增，将新增的对象放置到数组头部。
再定义saveNotesToLocalStorage方法如下：
var saveNotesToLocalStorage = function () {
$.jStorage.set(notesListStorageKey, notesList);
};
将记事列表保存到local storage中去。
为了能在编辑或者新增记事后，能返回到记事列表页，特增加了
returnToNotesListPage方法，如下：
var returnToNotesListPage = function () {
$.mobile.changePage("#" + notesListPageId,
{ transition: "slide", reverse: true });
};
最后，为了能在新增或者删除记事后，都能将currentNote变量重新设置，需要增加方法resetCurrentNote，代码为：
var resetCurrentNote = function () {
currentNote = null;
}
这样，我们就完成了新增一个记事及编辑一个记事内容的工作，注意到我们在保存记事时，如果遇到异常情况，我们本讲没处理，将留待下一讲进行讲授。本讲的代码在http://miamicoder.com/wp-content/uploads/2011/12/Building-a-jQuery-Mobile-App-Part-3-Src.zip中可以下载。
