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

我有一个随机日期列表，我在服务器上生成并以json格式发送回knockout viewmodel到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语句？

来源

2016-11-04 JPitts

可能你只是过滤您的原始数组每月。使用ko.utils.arrayFilter http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html –

感谢您的评论user2744722。我在互联网上搜索了2天，寻找解决方案，当然在发布这个问题后的几分钟里，我遇到了这个问题：http://stackoverflow.com/questions/27163547/group-events-by-date-using-knockoutjs 我将在今晚晚些时候处理解决方案，如果这有助于解决我的问题，我会发布它，所以也许它可以帮助别人！ – JPitts

这里是一个我没有使用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>

来源

2016-11-04 22:53:42

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

回答

相关问题