title: Autodividers for list
body: <p>I am creating a lits of items including first and last names.  The list is sorted by last name.  How do you create autodividers that will dividing the list items by last name?  </p>
  
  <pre><code>&lt;div class="listWrap"&gt;
      &lt;div id="userFilter"&gt;
          &lt;ul id="usersListView" data-bind="template: {name: 'usersListTemplate', foreach: users}" data-role="listview" data-filter="false" data-filter-placeholder="enter a colleague's name..."&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;script id="usersListTemplate" type="text/html"&gt;
          &lt;li data-theme="h" data-bind="click: $parent.UserInfo" class="clickableRow"&gt;
              &lt;table&gt;
                  &lt;tr class="colleague"&gt;
                      &lt;td&gt;
                          &lt;table&gt;                         
                              &lt;tr&gt;&lt;td&gt;&lt;span style="font-size:20px" class="firstname_" data-bind="text: firstname"&gt;&lt;/span&gt;&amp;nbsp;&lt;span style="font-size:20px" data-bind="text: lastname"&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
                              &lt;tr&gt;&lt;td&gt;&lt;a data-bind="text: email, attr: { href: 'mailto:'+email()}, click: $parent.alwaysTrue, clickBubble: false"&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/li&gt;
      &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>