Question

我有一个随机日期列表，我在服务器上生成并以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中只显示月份部分，如果该月的可观察数组的长度是> 1。 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语句实现这一目标？

Answer 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>

循环播放日期并按月创建日期组

1 个答案: