Kendo ui MVVM - 如何使用kendo模板绑定阵列中的可观察阵列和阵列

Question

以下是我的工作DEMO。

我有一个名为persons的observable array，每个数组元素包含另一个名为hobbies的数组。

我已经成功绑定使用kendo模板的人员数组，但没有人知道应该如何使用另一个模板绑定业余爱好数组。以下是我的DEMO的代码。

代码：

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

你需要使用一个for循环ul标签里面，是这样的：

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

Here it is the updated fiddle