recursive template

http://stackoverflow.com/questions/9985241/displaying-a-hierarchytree-using-knockoutjs

by kyrisu

HTML

<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>

<ul data-bind="foreach: subjectTree">
<li data-bind="text: Name"></li>
</ul>
<ul data-bind="template: { name: 'nodeTmpl', foreach: subjectTree}"></ul>

<script id="nodeTmpl" type="text/html">
    <li>
        <span data-bind="text: Name"></span>      
    </li>
</script>

CSS

ul { margin-left: 10px; }

JavaScript

var vm = {
    subjectTree: ko.observableArray([])
};

vm.filterTree = ko.computed(function() {
    return ko.utils.arrayFilter(this.subjectTree(), function(item) {
        return item().ParentId() == 6;
    });
},vm);

ko.applyBindings(vm);


var json = [{
    "Id": 4,
    "TicketId": 0,
    "ParentId": 1,
    "Name": "Rachunki",
    "Selected": false},
{
    "Id": 5,
    "TicketId": 0,
    "ParentId": 1,
    "Name": "KB24",
    "Selected": false},
{
    "Id": 6,
    "TicketId": 0,
    "ParentId": 1,
    "Name": "KB24 - Logowanie, autoryzacja i obsluga",
    "Selected": false},
{
    "Id": 7,
    "TicketId": 0,
    "ParentId": 1,
    "Name": "Security Update",
    "Selected": false},
{
    "Id": 8,
    "TicketId": 0,
    "ParentId": 1,
    "Name": "Karty - obsluga",
    "Selected": false},
{
    "Id": 9,
    "TicketId": 0,
    "ParentId": 1,
    "Name": "Karty kredytowe",
    "Selected": true},
{
    "Id": 10,
    "TicketId": 0,
    "ParentId": 1,
    "Name": "Karty - bledy i awarie",
    "Selected": false},
{
    "Id": 11,
    "TicketId": 0,
    "ParentId": 1,
    "Name": "Ubezpieczenie",
    "Selected": true},
{
    "Id": 12,
    "TicketId": 0,
    "ParentId": 1,
    "Name": "Pozostale produkty",
    "Selected": true},
{
    "Id": 13,
    "TicketId": 0,
    "ParentId": 1,
    "Name": "Kontakt telefoniczny",
    "Selected": true},
{
    "Id": 14,
    "TicketId": 0,
    "ParentId": 1,
    "Name": "Zmiana danych osobowych",
    "Selected": true},
{
    "Id": 15,
    "TicketId": 0,
    "ParentId": 1,
    "Name": "Awizo Warta (KB cash)",
    "Selected": false},
{
    "Id": 16,
    "TicketId": 0,
    "ParentId": 1,
    "Name": "Spotkanie",
    "Selected": false},
{
    "Id": 17,
    "TicketId": 0,
    "ParentId": 1,
    "Name": "Zaswiadczenia",
    "Selected": false},
{
    "Id": 18,
    "TicketId": 0,
    "ParentId": 1,
    "Name": "Uwagi klienta",
    "Selected": true},
{
    "Id": 19,
    "TicketId": 0,
    "ParentId": 1,
    "Name": "Inne",
    "Selected":...