设计删除记事功能
接下来，我们要设计删除某一个记事的功能，设计好的界面如下图：
当用户按delete按钮后，弹出如下界面：
当用户选No时，则返回查看记事具体内容的界面，如果选择的是YES，则删除一条记事。
首先我们在index.html中，设计删除信息提示的界面，如下：
<div data-role="header">
<h1>Delete Note?</h1>
</div>
<div data-role="content">
<div id="delete-note-content-placeholder"></div>
<a id="cancel-delete-note-button" data-role="button" data-theme="b" data-rel="back">No</a>
<a id="ok-to-delete-note-button" data-role="button" data-theme="f">Yes</a></div>
</div>
注意我们使用了data-role=”dialog”属性，这个之前谈到的一样，让框架输出一个对话框风格的页面。之后在Yes和No的按钮中，注意使用了data-role=”button”的方法，并指出了每个按钮的data-theme的风格样式，其中b和f都是jQuery Mobile内置的CSS样式，当然用户可以自己修改。
跟之前一样，我们要在控制层中控制这个删除界面的行为，同样首先定义删除界面的标识如下：
var confirmDeleteNoteDlgSel = "#confirm-delete-note-dialog";
再将在编辑记事页面中的删除按钮以及删除界面中的确认按钮、在删除确认界面中的一个DIV都定义一个别名标识，如下：
var deleteNoteButtonSel = "#delete-note-button",
deleteNoteContentPlaceholderSel = "#delete-note-content-placeholder",
okToDeleteNoteButtonSel = "#ok-to-delete-note-button";
接下来，我们编写删除按钮的基本事件框架如下：
// 其余省略的代码
d.delegate(deleteNoteButtonSel, "tap", onDeleteNoteButtonTapped);
};
其中onDeleteNoteButtonTapped代码如下：
var onDeleteNoteButtonTapped = function () {
if (currentNote) {
var noteContentPlaceholder = $(deleteNoteContentPlaceholderSel);
noteContentPlaceholder.empty();
$("
" + currentNote.title + "
" + currentNote.narrative + "
").appendTo(noteContentPlaceholder);
$.mobile.changePage(confirmDeleteNoteDlgSel, defaultDlgTrsn);
}
};
在onDeleteNotebuttonTapped()方法中，首先我们读取了当前即将要被删除的记事，然后将其添加到placeholder这个div中，并且再使用changePage方法让当前界面成为焦点界面，这个之前的论述是一样的。
接下来，再分别看下当用户点NO或YES时，如何进行事件的处理。当用户点NO按钮时，
页面的代码为：
其中的data-rel=”back”是内置的功能，能自动回退到上一个页面，而这正是我们所需要的。
而在YES按钮的事件处理中，当用户点YES后，需要删除记事后再带用户回到记事列表，并且刷新此时的记事列表。同样在控制层中的init方法中加入如下代码：
//省略其他代码
d.delegate(okToDeleteNoteButtonSel, "tap", onOKToDeleteNoteButtonTapped);
};
接下来定义onOKToDeleteNoteButtonTapped方法，如下：
var onOKToDeleteNoteButtonTapped = function () {
dataContext.deleteNote(currentNote);
returnToNotesListPage();
};
这个很容易理解，其中调用了dataContext中的deleteNote方法删除一个真正的记事，然后再调用returnToNotesListPage()返回记事列表。在编写deleteNote方法前，先继续编写单元测试用例如下：
// 创建记事
var dateCreated = new Date();
var id = new String(dateCreated.getTime());
var noteModel = new Notes.NoteModel({
id: id,
dateCreated: dateCreated,
title: "",
narrative: ""
});
// 清空记事列表
var notesList = [];
// 添加到localstorage本地存储
notesList.push(noteModel);
$.jStorage.set(notesListStorageKey, notesList);
notesList = $.jStorage.get(notesListStorageKey);
expect(notesList.length).toEqual(1);
// 删除记事
Notes.dataContext.init(notesListStorageKey);
Notes.dataContext.deleteNote(noteModel);
// 删除后应该返回空的列表，断言判断
notesList = $.jStorage.get(notesListStorageKey);
expect(notesList.length).toEqual(0);
// 清除相关资源
$.jStorage.deleteKey(notesListStorageKey);
});
运行测试后当然结果是失败的，因为没有编写deleteNote方法。因此编写代码如下：
var deleteNote = function (noteModel) {
var i;
for (i = 0; i < notesList.length; i += 1) {
if (notesList[i].id === noteModel.id) {
notesList.splice(i, 1);
i = notesList.length;
}
}
saveNotesToLocalStorage();
};
这里就是通过循环遍历数组的方法，根据notedId找出要删除的元素，然后通过数组的splice方法进行删除，删除后记得调用saveNotesToLocalStorage();
方法进行保存。为了方便在模块的接口处进行调用，我们添加到controller.js中：
init: init,
createBlankNote: createBlankNote,
getNotesList: getNotesList,
saveNote: saveNote,
deleteNote: deleteNote
};
再运行测试，可以看到顺利通过。如下图：
