剣道のMVVM - 剣道テンプレートを使って観測可能な配列と配列を配列内に束縛する方法

Question

ここは私の働きですDEMOです。

私はという名前のobservable arrayを持っており、各配列要素にはhobbiesという別の配列が含まれています。

剣道テンプレートを使用して人物配列を正常にバインドしましたが、他のテンプレートを使用して趣味の配列をバインドする方法を知っていますか？以下は私のデモのコードです。

コード：

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

あなたは、ulタグ内のforループのようなものを使用する必要があります：

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

Here it is the updated fiddle