基于所选复选框列表的knockout数组过滤器

时间:2015-12-03 15:40:46

标签: arrays knockout.js filter

我正在努力根据左侧协议下的复选框列表选择正文中的列表,请参阅jsfiddle请帮助。

social-stream-container

1 个答案:

答案 0 :(得分:4)

您可以为此目的使用计算的observable,如下所示

viewModel.filteredProtocols = ko.computed(function () {
  var selectedProtocols = ko.utils.arrayFilter(viewModel.protocol(), function (p) {
    return p.selected();
  });
  if (selectedProtocols.length == 0)   //if none selected return all
    return viewModel.protocoldocs();
  else { //other wise only return selected protocoldocs
    return ko.utils.arrayFilter(viewModel.protocoldocs(), function (item) {
      return ko.utils.arrayFilter(selectedProtocols, function (p) {
        return p.id == item.id
      }).length > 0;
    });
  }
})

并将结果表绑定到此filteredProtocol。我还修改过的一些事情是

我为协议添加了一个选定的标志以保留选中的值

<input type="checkbox" data-bind="checked:selected, attr: {id: 'checkBox' + id}">

...

function protocol(id, name) {
  this.id = id;
  this.name = name;
  this.selected = ko.observable(false);
}

您可以在此处找到工作示例http://jsfiddle.net/prc4pqnm/3/