Foreach 不同的值敲除列表

【问题标题】：Foreach distinct value Knockout listForeach 不同的值敲除列表
【发布时间】：2014-04-18 16:04:17
【问题描述】：

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

更新：有一个 FirstName MiddleName LastName

查看模型：

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

更新：我可以使用以下函数获得不同的值，但我无法对文本进行数据绑定。这是我的一系列城市的 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();
});

这是我的新视图模型：

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

【问题讨论】：

标签： list knockout.js foreach

【解决方案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);

使用此计算数组，在您的视图中使用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>

【讨论】：