鑑於淘汰賽模式，對如何生成字母索引

Question

想法我有這樣的聯繫人列表：

1 Mon 
    Bob 
    Brett 
    Brad 
    Kathy 
    Zelda 

這是一個與KnockoutJS很容易將模型應用或使用jQuery的模板後，顯示該列表。

什麼我有興趣做，現在是動態顯示標題，如：它的工作原理iPhone上的方式，這意味着輸出將如下所示：

# 
    1 Mon 
B 
    Bob 
    Brett 
    Brad 
K 
    Kathy 
Z 
    Zelda 

如何巧妙地敲做到這一點有什麼想法無需爲每個字母數字硬編碼標題？

Answer 1

我回答你的問題就KO論壇在這裏：https://groups.google.com/d/topic/knockoutjs/VgDnxb_jB7c/discussion

樣品在這裏：http://jsfiddle.net/rniemeyer/MZN6u/

我創建了一個dependentObservable與您可以映射到您的視圖（模板）容易，這是一個數組的結構每個對象都有一個letter屬性和一個contacts數組。

dependentObservable樣子：

viewModel.contactsByLetter = ko.dependentObservable(function() { 
    var letterIndex = []; 
    var result = []; 
    //sort the contacts 
    var sortedContacts = this.contacts().sort(function(a, b) { 
     return a.name().toUpperCase() > b.name().toUpperCase() ? 1 : -1; 
    }); 
    //loop through each contact and put it with its letter 
    ko.utils.arrayForEach(sortedContacts, function(contact) { 
     //grab first character 
     var firstLetter = contact.name().charAt(0).toUpperCase(); 
     //if it is a number use # 
     if (!isNaN(firstLetter)) { 
      firstLetter = "#"; 
     } 

     //do we already have entries for this letter 
     if (!letterIndex[firstLetter]) { 
      //new object to track this letter's contacts 
      var letterContacts = { 
       letter: firstLetter, 
       contacts: [] 
      }; 
      letterIndex[firstLetter] = letterContacts ; //easy access to it 
      result.push(letterContacts); //add it to the array that we will return 
     } 

     //at this point we should have an object to push our contact to 
     letterIndex[firstLetter].contacts.push(contact); 
    }); 

    return result; 
}, viewModel); 

Answer 2

• 將它們自然排序，以防它們已經存在。
• 創建一個新對象來保存組織的新數據。
• 循環訪問已排序的數組，爲每個遇到的新組創建一個數組。
• 基於組添加聯繫人。

contacts.sort(); 
var contactsGrouped = {}; 
$.each(contacts, function(index, contact) { 
    var first = contact.substr(0, 1), 
     group = first.match(/\d+/) ? '#' : first; 

    if (contactsGrouped[group] === undefined) { 
     contactsGrouped[group] = []; 
    } 

    contactsGrouped[group].push(contact); 
}); 

jsFiddle。

如果您不確定聯繫人是否有前導空白或尾隨空白，則可能需要致電$.trim()。

另外，如果您想爲#和a-z創建空白陣列，只需首先循環訪問'#abcdefghijklmnopqrstuvwxyz'.split('')，然後設置空白陣列。

此外，如果您希望屬性爲大寫，只需在設置屬性之前調用toUpperCase()方法即可。