Knockout divided list

by John Allan

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<!-- ko foreach: items -->
    <!-- ko if:isFirst -->
        <h3 data-bind="text: category"></h3>
    <!-- /ko -->
    <div data-bind="text: name"></div>
<!-- /ko -->

CSS

h3{
 font-weight:bold;        
}

JavaScript

function Item(name, category) {
    this.name = name;
    this.category = category
}
        
function myViewModel()  {
    this.items = ko.observableArray()
};
    
var viewModel = new myViewModel();   

function filterList() {
    var items, isFirst, prevCategory;
    
    items = this();
    prevCategory = "";
    isFirst = true;
    
    for (var i = 0, j = items.length; i < j; i++) {
        var item = items[i];
        if (item.category !== prevCategory) {
            isFirst = true;
            prevCategory = item.category;            
        } else {
            isFirst = false;                
        }
        item.isFirst = isFirst;
        /* dynamic ??
        if (!item.isFirst) {
           item.isFirst = ko.observable(isFirst);  
        } else {
           item.isFirst(isFirst);   
        }
        */
    }
    
}
    
viewModel.items.subscribe(filterList, viewModel.items);

viewModel.items([
    new Item("Banana", "Food"),
    new Item("Hot Dog", "Food"),
    new Item("Pizza", "Food"),
    new Item("Couch", "Furniture"),
    new Item("Table", "Furniture"),
    new Item("Chair", "Furniture")
]);

 
    
ko.applyBindings(viewModel);