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