KnockoutJS ObservableArray data grouping

http://stackoverflow.com/questions/9877301/knockoutjs-observablearray-data-grouping

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.0.0.debug.js"></script>



<ul data-bind="foreach: choices">
    <li>
        <h2 data-bind="text: $data"></h2>
        <ul data-bind="foreach: $root.people">
            <!-- ko if: $parent === type() -->
            <li data-bind="text: name"></li>
            <!-- /ko -->
        </ul>
        <hr/>
    </li>
</ul>

CSS

h2 { font-size: 1.2em; font-weight: bold; }

JavaScript

var Person = function(name, type) {
   this.name = ko.observable(name);
   this.type = ko.observable(type);    
}

var ViewModel = function() {
    var self = this; 
    this.choices = ["Friend", "Enemy", "Other" ];
    this.people = null;

 
};

ViewModel.people = ko.observableArray([
           new Person("Jimmy", "Friend"),
           new Person("George", "Friend"),
           new Person("Zippy", "Enemy")
    ]);
ko.applyBindings(new ViewModel());