jQuery Mobile开发记事本应用第三季-技术开发专区

jQuery Mobile开发记事本应用第三季

作者：廖煜嵘编辑：景保玉 2012-01-31 05:00 IT168网站原创

　　按日期对记事进行分组

　　为了能让用户更方便地在记事列表中寻找记事,我们将记事按日期进行分组,效果如下图:

按日期对记事进行分组

　　代码如下：

var renderNotesList = function () {
    var notesList = dataContext.getNotesList();
    var view = $(notesListSelector);
    view.empty();
    if (notesList.length === 0) {
        $(noNotesCachedMsg).appendTo(view);
    } else {
        var liArray = [],
            notesCount = notesList.length,
            note,
            dateGroup,
            noteDate,
            i;
        var ul = $("<ul id=\"notes-list\" data-role=\"listview\"></ul>").appendTo(view);
        for (i = 0; i < notesCount; i += 1) {
            note = notesList[i];
            noteDate = (new Date(note.dateCreated)).toDateString();
            if (dateGroup !== noteDate) {
                liArray.push("<li data-role=\"list-divider\">" + noteDate + "</li>");
                dateGroup = noteDate;
            }
            liArray.push("<li>"
                + "<a data-url=\"index.html#note-editor-page?noteId=" + note.id + "\" href=\"index.html#note-editor-page?noteId=" + note.id + "\">"
                + "<div  class=\"list-item-title\">" + note.title + "</div>"
                + "<div class=\"list-item-narrative\">" + note.narrative + "</div>"
                + "</a>"
                + "</li>");
        }
        var listItems = liArray.join("");
        $(listItems).appendTo(ul);
        ul.listview();
    }
};

　　如果学习过第2讲的教程，应该对上面循环产生记事的过程不陌生。但注意到的是，其中使用了变量noteDate保存了每个记事的日期，当判断出每个记事的所属日期不同的时候，则重新生成一个分隔项(其data-role为list-divider)，而其内容为另外一个新的日期(详见

liArray.push("<li data-role=\"list-divider\">" + noteDate + "</li>");）。

此外，请注意学习如何为每个记事生成编辑页面的链接，即：

<a data-url=\"index.html#note-editor-page?noteId=" + note.id + "\" href=\"index.html#note-editor-page?noteId=" + note.id + "\">"

　　这个note-editor-page就是我们要新增或者编辑记事的页面，下面开始学习如何设计

0

第1页：步骤一、重构第2页：按日期对记事进行分组第3页：新增加记事页面设计第4页：装载记事内容到记事页面第5页：新增加记事内容

相关文章

关注我们