如何在Handlebarsjs中按字母順序顯示姓名underscorejs

Question

嗨，我是Handlebarsjs的新手。

我有姓名，電子郵件，電話，聯繫人等的集合如下

[ 
    { 
    "name": "Bob Wolmer", 
    "email": "bob@wolmer.com", 
    "phone": "(535) 235-1234", 
    "address": "301 Cobblestone Wy., Berdrock 00000", 
    "contactId": "1121", 
    "labels": {} 
    }, 
    { 
    "name": "Wilma Erra", 
    "email": "wilma@erra.com", 
    "phone": "(535) 235-3659", 
    "address": "301 Cobblestone Wy., Berdrock 70777", 
    "contactId": "1122", 
    "labels": {} 
    }, 
    { 
    "name": "Brad", 
    "email": "brad@brad.com", 
    "phone": "(535) 235-3546", 
    "address": "301 Cobblestone Wy., Redrock 70777", 
    "contactId": "1123", 
    "labels": [{"name": "Friends"},{"name": "Family"}] 
    }, 
    { 
    "name": "", 
    "email": "wilson@gmail.com", 
    "phone": "(535) 235-3657", 
    "address": "301 Cobblestone Wy., Dedrock 70777", 
    "contactId": "1124", 
    "labels": [{"name": "Friends"}] 
    } 
] 

我想如下

B 
Bob 
Brad 

W 
Wilma Erra 

任何一個可以建議我怎麼顯示名字做到這一點。

由於提前

Answer 1

讓我們只是說，你已經分配了JSON名爲contacts的變量可以通過name屬性的第一個字母，像這樣用下劃線到組：

var groupedContacts = _.groupBy(contacts, function(contact){ 
    return contact.name.substr(0,1); 
}); 

你然後可以通過您的組重複，也許對它們進行排序和寫的內容，按您的例子是這樣的：在一個真實的世界

_.each(groupedContacts, function (contacts, key) { 

    console.log(key); // writes the Index letter 

    // optional sort 
    var sortedContacts = _.sortBy(contacts, function (contact) { 
     return contact.name; 
    }); 

    _.each(sortedContacts, function(contact) { 
     // Writes the contact name 
     console.log(contact.name); 
    }); 
}); 

所以應用程序，你會想用Handlebars模板替換console.log行和/或把它放在幫助器中（但是要注意在JavaScript中嵌入HTML字符串），但這很容易。此外，您也可能希望按您的順序排列groupedContacts以獲取索引。您可以使用上述示例中所示的相同sortBy方法來執行此操作。

Answer 2

首先您需要定義適合您的JSON佈局的把手模板;

{{#list people}}{{name}} {{email}} {{phone}} {{address}} {{contactId}} {{labels}}{{/list}} 

我假設人是你的JSON列表的名字是這樣的;

{ people: [ 
    { 
    "name": "Bob Wolmer", 
    "email": "bob@wolmer.com", 
    "phone": "(535) 235-1234", 
    "address": "301 Cobblestone Wy., Berdrock 00000", 
    "contactId": "1121", 
    "labels": {} 
    }, 
    { 
    "name": "Wilma Erra", 
    "email": "wilma@erra.com", 
    "phone": "(535) 235-3659", 
    "address": "301 Cobblestone Wy., Berdrock 70777", 
    "contactId": "1122", 
    "labels": {} 
    }, 
    { 
    "name": "Brad", 
    "email": "brad@brad.com", 
    "phone": "(535) 235-3546", 
    "address": "301 Cobblestone Wy., Redrock 70777", 
    "contactId": "1123", 
    "labels": [{"name": "Friends"},{"name": "Family"}] 
    }, 
    { 
    "name": "", 
    "email": "wilson@gmail.com", 
    "phone": "(535) 235-3657", 
    "address": "301 Cobblestone Wy., Dedrock 70777", 
    "contactId": "1124", 
    "labels": [{"name": "Friends"}] 
    } 
]} 

然後你可以使用這樣的註冊list把手模板，並通過您的JSON迭代;

Handlebars.registerHelper('list', function(items, options) { 
    var out = "<ul>"; 
    var names = []; 
    var letters = []; 
    for(var i=0, l=items.length; i<l; i++) { 
    name = items[i].name; 
    if(name == ""){ 
     continue; 
    } 
    var firstLetter = name.substring(0,1); 
    var arrayWithFirstLetter = names[firstLetter]; 
    if(arrayWithFirstLetter == null){ 
     names[firstLetter] = []; 
     letters.push(firstLetter); 
    } 
    var firstName = name.indexOf(" ") == -1 ? name : name.substring(0,name.indexOf(" ")); 
    names[firstLetter].push(firstName) 
    } 

    for(var i=0; i < letters.length; i++) { 
    out = out + "<li>" + letters[i] + "</li>"; 
    for(var k=0; k < names[letters[i]].length; k++){ 
     out = out + "<li>" + names[letters[i]][k] + "</li>"; 
    } 
    } 

    return out + "</ul>"; 
}); 

輸出是;

• 乙
• 鮑勃
• 布拉德
• W¯¯
• 威爾瑪