Kendo ui MVVM - Comment lier un tableau observable et un tableau à l'intérieur d'un tableau en utilisant des modèles de kendo

Question

Voici mon travail DEMO. J'ai un observable array nommé persons et chaque élément de tableau contient un autre tableau nommé hobbies.

J'ai réussi à lier le tableau de personnes en utilisant un modèle de kendo, mais est-ce que quelqu'un sait comment lier le tableau de passe-temps en utilisant un autre modèle. Voici le code de ma 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> 

Answer 1

Vous devez utiliser une boucle dans la balise ul, quelque chose comme:

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

Here it is the updated fiddle