Цитирование по датам в нокаут и создание группы дат по месяцам

Question

У меня есть список случайных дат, которые я генерирую на сервере и отправляю обратно в формате json в режим просмотра нокаута в наблюдаемый массив() ([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 

и т.д ...

Я понимаю основной цикл просмотра в нокауте, и динамически выводить 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?

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>