创建控制层
我们将控制层的文件命名为Control.js,先定义一个空的控制层文件如下：
Notes.controller = (function ($, dataContext) {
})(jQuery, Notes.dataContext);
现在，我们需要的是控制层将缓存在本地存储的记事列表罗列出来，在控制层中，将会调用init方法，这个init方法会在页面加载时，调用mobileinit方法会间接调用到。代码如下：
function init() {
dataContext.init();
var d = $(document);
d.bind("pagechange", onPageChange);
}
return {
init: init
}
})(jQuery, Notes.dataContext);
在控制层中的init()方法首先触发了dataContext中的init()方法，这很容易理解，因为我们必须获得数据访问的上下文，接下来可能大家会认为在控制层的init()方法中会列出在缓存中的记事列表，这个想法没错，但我们会通过在jQuery Mobile的pagechange事件中(相关详细介绍见http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html)进行绑定，这样有个好处，就是不单在应用启动的时候显示记事的列表，而且是当用户从编辑记事等其他页面返回主页时也能显示这些记事列表。下面我们往控制层中增加这个onPageChange()方法如下：
var notesListSelector = "#notes-list-content";
var noNotesCachedMsg = "</pre>
<div>No notes cached</div>
<pre>";
var notesListPageId = "notes-list-page";
var currentNote = null;
function init() {
dataContext.init();
var d = $(document);
d.bind("pagechange", onPageChange);
}
function onPageChange(event, data) {
var toPageId = data.toPage.attr("id");
switch (toPageId) {
case notesListPageId:
renderNotesList();
break;
}
}
return {
init: init
}
})(jQuery, Notes.dataContext);
处理的过程其实很简单，就是在onPageChange方法中，通过检查即将要跳转的页面的id属性(通过data.toPage方法)，如果是等于“notes-list-page”，则调用renderNotesList()方法即可。
接下来，我们编写renderNotesList()方法，代码如下：
var notesList = dataContext.getNotesList();
var view = $(notesListSelector);
view.empty();
if (notesList.length === 0) {
$(noNotesCachedMsg).appendTo(view);
} else {
var notesCount = notesList.length;
var note;
var ul = $("<ul id=\"notes-list\" data-role=\"listview\"></ul>").appendTo(view);
for (var i = 0; i < notesCount; i++) {
note = notesList[i];
$("<li>"
+ "<a data-url=\"index.html#note-editor-page?noteId=" + note.id + "\" href=\"index.html#note-editor-page?noteId=" + note.id + "\">"
+ "<div>" + note.title + "</div>"
+ "<div class=\"list-item-narrative\">" + note.narrative + "</div>"
+ "</a>"
+ "</li>").appendTo(ul);
}
ul.listview();
}
};
在上面的代码中，首先通过data context的getNotesList()方法，获得了记事列表，并且将view区域(是个div)的内容清除，然后判断记事内容是否为空，如果为空的话则显示没有记事内容的提示信息，否则使用一个循环，将每个记事的内容增添到要显示的区域中，注意这里是通过字符串拼接的方式，构造出一个需要符合jQuery Mobile显示格式的字符串。最后还需要调用jQueryMobile的listview()方法才能生成一个完成的listview列表。
并且注意到，在列表中我们使用到了list-item-narrative的CSS样式文件，这需要我们定义如下：
{
color: #666666;
font-weight: normal;
}
并且将这个CSS文件保存在css目录下，命名为app.css，如下图：
最后，我们在手机浏览器上运行index.html，可以看到如下的界面：
小结
在这一讲中，我们继续使用单元测试驱动的方法，初步构建了模型层、控制层和表示层三层的需要的文件，读者可以从中体会到MVC的开发模式在移动开发中的应用，在下一讲中，我们将开始设计新增、编辑和删除记事文件。本讲的代码可以从
http://miamicoder.com/wp-content/uploads/2011/11/Building-a-jQuery-Mobile-App-Part-2-Src.zip 下载
