在foreach循环内分配值

Question

想象一下按姓名排序的联系人数组。 该数组可以像这样输出：

<ul data-bind="foreach: contacts>
    <li data-bind="text: name"></li>
</ul>

我想做的是为每个具有不同起始字母的li指定一个标题，例如显示A，B，D ...

- A
- Anderson
- Andrews
- B
- Bellamy
- D
- Davidson
- Davis

在普通的编程语言中，我将定义一个包含名称首字母的变量，并在foreach循环中进行检查以查看其是否不同。 如果是这种情况，则显示标题。

我应该如何使用基因敲除（js）？

Answer 1

这是一种坚持淘汰模式的方法。 首先，您将创建一个计算的可观察对象，该对象将数组映射到按字母分组的新数组。

self.contactsByLetter = ko.computed(function () {
    var result = [],
        currentLetter, currentGroup;
    ko.utils.arrayForEach(self.contacts(), function (contact) {
        if (contact.name[0] !== currentLetter) {
            currentLetter = contact.name[0];
            currentGroup = {
                letter: currentLetter,
                contacts: []
            }
            result.push(currentGroup);
        }
        currentGroup.contacts.push(contact);
    })
    return result;
});

然后，您的HTML仅需要两个循环。

<ul data-bind="foreach: contactsByLetter">
    <li class="heading" data-bind="text: letter"></li>
    <!--ko foreach: contacts-->
    <li data-bind="text: name"></li>
    <!--/ko-->
</ul>

jsFiddle： http : //jsfiddle.net/mbest/ZcQT4/

Answer 2

不确定这是否更干净，但是您可以对字母使用固定的数组，然后在视图模型上使用方法仅返回以第n个字母开头的项-即

<ul data-bind="foreach: letters">
    <li data-bind="text: $data">
        <ul data-bind="foreach: $parent.contactsStartingWith($data)">
             <li data-bind="text: name"></li>
        </ul>
    </li>
</ul>

可以这样定义contactsStartingWith ：

function(start) {
    return ko.utils.arrayFilter(contacts(), function(it) { return it.name()[0].toUpperCase() == start } );
}

...，并且字母数组可以很容易地提取为：

viewModel.letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");

（有关使用数组的敲除工具的一些有用参考资料： http : //www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html ）