1

姓名を含む一連のアイテムを作成しています。リストは姓でソートされています。リスト項目を姓で分割する autodivider を作成するにはどうすればよいですか? 

<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>
4

1 に答える 1

4

オートディバイダーにカスタムテキストを使用するには、いくつかの作業を行う必要があります。

  • 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へのリンクです（もう少しマークアップを使用しています）

于 2012-11-16T15:37:57.813 に答える