jquery - 列表的自动分隔符

Question

我正在创建一系列项目，包括名字和姓氏。该列表按姓氏排序。您如何创建按姓氏划分列表项的自动分隔符？

<div class="listWrap">
    <div id="userFilter">
        <ul id="usersListView" data-bind="template: {name: 'usersListTemplate', foreach: users}" data-role="listview" data-filter="false" data-filter-placeholder="enter a colleague's name...">
        </ul>
    </div>
    <script id="usersListTemplate" type="text/html">
        <li data-theme="h" data-bind="click: $parent.UserInfo" class="clickableRow">
            <table>
                <tr class="colleague">
                    <td>
                        <table>                         
                            <tr><td><span style="font-size:20px" class="firstname_" data-bind="text: firstname"></span>&nbsp;<span style="font-size:20px" data-bind="text: lastname"></span></td></tr>
                            <tr><td><a data-bind="text: email, attr: { href: 'mailto:'+email()}, click: $parent.alwaysTrue, clickBubble: false"></a></td></tr>
                        </table>
                    </td>
                </tr>
            </table>
        </li>
    </script>
</div>

Answer 1

要为自动分隔符使用自定义文本，您需要做一些事情。

• 您需要添加data-autodividers="true"到ul
• 您需要指定一个autodividersSelector输出自动分隔符文本的函数
• 您需要刷新列表视图

例如，给定以下标记的简化版本

  <div data-role="page" id="pageAutoDiv">
    <div data-role="header"><h3>Header</h3></div>
    <div data-role="content">
      <ul data-autodividers="true" id="usersListView" data-role="listview">
        <li> <span class="firstname_">Francisca  </span>&nbsp;<span  class="lastname" data-bind="text: lastname">Fidler</span></li>
        <li><span class="firstname_">Jolie  </span>&nbsp;<span class="lastname" data-bind="text: lastname">Jarnagin</span></li>
        <li><span class="firstname_">Quiana </span>&nbsp;<span class="lastname" data-bind="text: lastname">Quiroz</span></li>
      </ul>      
    </div>
    <div data-role="footer"><h4>Footer</h4></div>
  </div>

您可以使用以下 JavaScript 使用姓氏创建自动分隔符

$('#pageAutoDiv').bind('pageshow', function () {
    $('#usersListView').listview({
        autodividers: true,
        autodividersSelector: function (li) {
            return $(li).find('.lastname').text();
        }
    });

    $('#usersListView').listview('refresh');
});

这是一个jsBin的链接（使用更多的标记）