循环遍历淘汰赛中的日期并按月创建日期组答案

【问题标题】：Loop through dates in knockout and create group of dates by month循环遍历淘汰赛中的日期并按月创建日期组
【发布时间】：2016-11-04 17:44:12
【问题描述】：

我有一个随机日期列表，我在服务器上生成并以 json 格式发送回淘汰视图模型到 observableArray() （[01/02/2016, 01/15/2016, 02/04/ 2016, 03/05/2016 等），我无法完全理解如何迭代这些日期并在 html 中创建以下输出：

January
-------
01/02/2016
01/15/2016

February
-------
02/04/2016

March
-------
03/05/2016

等等……

我了解淘汰赛中的基本 foreach 循环，以及动态输出 html 和所有这些。最好的做法是为每个月创建一个可观察数组，然后在 html 中仅在该月的可观察数组长度大于 0 时显示月份部分？

var januaryArray = ko.observableArray();
var februaryArray = ko.observableArray();

<ul id="januaryList" data-bind="foreach: januaryArray, visible: januaryArray.length > 0">


    .....

<ul id="februaryList" data-bind="foreach: februaryArray, visible: februaryArray.length > 0">
.....

或者有没有更好、更简洁的方法来通过一些 if 语句来实现这一点？

【问题讨论】：

您能否过滤每个月的原始数组。使用 ko.utils.arrayFilter knockmeout.net/2011/04/utility-functions-in-knockoutjs.html
感谢用户 2744722 的评论。我在互联网上搜索了 2 天以寻找解决方案，当然，在发布这个问题几分钟后，我遇到了这个问题：stackoverflow.com/questions/27163547/… 我今晚晚些时候将研究解决方案，如果这有助于解决我的问题，我会发布它，所以也许它可以帮助其他人！

标签： javascript knockout.js

【解决方案1】：

这是我使用 ko.utils.arrayfilter 做的一个

这是小提琴。 https://jsfiddle.net/othkss9s/27/

这里是javascript。

function model() {
  var self = this;
  this.dates = ['01/02/2016', '01/15/2016', '02/04/2016', '03/05/2016'];

  this.months = ko.observableArray([{
    name: 'January',
    value: '01'
  }, {
    name: 'February',
    value: '02'
  }, {
    name: 'March',
    value: '03'
  }]);

  this.filteredDates = function(data) {
    return ko.utils.arrayFilter(self.dates, function(item) {
      return item.substr(0, 2) === data.value;
    });
  };
}

var myViewModel = new model();

$(document).ready(function() {
  ko.applyBindings(myViewModel);

});

这里是html

<ul data-bind="foreach: months">
  <li>
    <b data-bind="text: $data.name"></b>
    <ul data-bind="foreach: $root.filteredDates($data)">
      <li>
        <b data-bind="text: $data"></b>
      </li>
    </ul>
  </li>
</ul>

【讨论】：