list - Foreach 不同的值 knockout 列表

Question

我正在尝试使用我的 viewModel.Names 中的姓氏来填充无序列表。它填充得很好，但我只想要不同的值，而这目前给出了多个相同的姓氏？如何获得不同的值？

更新:有一个 FirstName MiddleName LastName

查看模型:

<ul data-bind="foreach: viewModel.Names">
    <li><a data-bind="text: LastName"></a></li>
</ul>

更新:我可以使用以下函数获取不同的值，但我无法对文本进行数据绑定(bind)。这是我的城市数组的 console.log 的屏幕截图，情况与 LastName 相同。

this.LastNames = ko.dependentObservable(function () {
    var data = ko.utils.arrayMap(viewModel.Names(), function (item) {
        return item.LastName()
    })
    return ko.utils.arrayGetDistinctValues(data).sort();
});

这是我的新 View 模型:

<uldata-bind="foreach: LastNames">
    <li><input type="checkbox"/><a data-bind="text: []"></a></li>
</ul>

Answer 1

如果我没理解错的话，你需要的是像这样创建一个计算数组:

// this beeing your model
this.distinctNames = ko.computed(function(){
   var distinct = [];
   for (var i = 0; i < this.Names.length;i++) {
       if (distinct.indexOf(this.Names[i]) == -1)
          distinct.push({LastName:this.Names[i]});
   }
   return distinct;
}, this);

有了这个计算数组，在您的 View 中使用 distinctNames 变量将为您提供一个基于 Names 数组当前状态的过滤数组。

您的 foreach 将是:

<ul data-bind="foreach: viewModel.distinctNames">
    <li><a data-bind="text: LastName"></a></li>
</ul>

参见 http://knockoutjs.com/documentation/computedObservables.html

编辑

您以错误的方式访问了foreach 的数据。您应该使用 $data 来引用当前的 foreach 值:

<ul data-bind="foreach: LastNames">
    <li><input type="checkbox"/><a data-bind="text: $data"></a></li>
</ul>