Kendo ui MVVM - How to bind an observable array and array inside array using kendo templates

Here is the my working DEMO.

I have an observable array named persons and each array element contains an another array named hobbies.

I have successfully bound the persons array using kendo template, but does anyone know how should I bind the hobbies array using an another template. Below is the code from my DEMO.

Code:

var persons = new kendo.data.ObservableArray(
[
    { 
        name: "John Doe", 
        age: 28,
        hobbies: [
            { id: 1, description: "Baseball", rank: 1 }, 
            {id: 2, description: "music", rank: 3 }, 
            { id: 3, description: "Surfing the web", rank: 2}
        ]
    }, 
    { 
        name: "Jane Doe", 
        age: 24,
        hobbies: [ 
            { id: 1, description: "Volley Ball", rank: 1 }, 
            {id: 2, description: "Cricket", rank: 3 }, 
            { id: 3, description: "Hockey", rank: 2}
        ]
    }
]
);

var viewModel = kendo.observable({
    array: persons 
});

kendo.bind($("#example"), viewModel);



<h2>Persons Array</h2><br/>
<div id="example" data-template="template" data-bind="source: array">
</div>

<script id="template" type="text/x-kendo-template">
    <div>
        Name: #=name# || Age: #=age# <br>
        <ul>Hobbies (below, I want to display hobbies)</ul>
        <br/>
    </div>
</script>

You need to use a for loop inside the ul tag, something like:

# for (var i = 0; i < hobbies.length; i++) { #
   <li>#= hobbies[i].description#</li>
# } #

Here it is the updated fiddle