jquery - 给定 knockout 模型，关于如何生成字母索引的思考

Question

我有一个联系人列表，例如:

  1 Mon
  Bob
  Brett
  Brad
  Kathy
  Zelda

使用 KnockoutJS 在应用模型或使用 jQuery 模板后显示该列表非常容易。

我现在感兴趣的是动态显示标题，就像它在 iPhone 上的工作方式一样，这意味着输出将如下所示:

#
  1 Mon
B
  Bob
  Brett
  Brad
K
  Kathy
Z  
  Zelda

关于如何通过 Knockout 巧妙地完成此任务，而不必为每个字母数字硬编码标题，有什么想法吗？

Answer 1

我在 KO 论坛上回答了您的问题:https://groups.google.com/d/topic/knockoutjs/VgDnxb_jB7c/discussion

示例:http://jsfiddle.net/rniemeyer/MZN6u/

我创建了一个 dependentObservable，其结构可以轻松映射到 View (模板)，它是一个对象数组，每个对象都有一个 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);