Kendo ui MVVM - 如何使用 kendo 模板绑定可观察数组和数组内部数组

Question

这是我的工作 DEMO。

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

我已经使用 kendo 模板成功绑定了 persons 数组，但是有谁知道我应该如何使用另一个模板绑定 hobbies 数组。下面是我的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

您需要在 ul 标签内使用 for 循环，例如：

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

Here it is the updated fiddle

Answer 2

使用另一个名为 "hobby-template" 的嵌套模板并将 "hobbies" 作为源绑定到

<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>
            <span data-bind="text:name"></span>
            <span data-bind="text:age"></span>
            <ul data-template="hobby-template" data-bind="source: hobbies"></ul>
    </div>
</script>

<script id="hobby-template" type="text/x-kendo-template">
    <li>
         <span data-bind="text:description"></span>
         <span data-bind="text:rank"></span>
    <li>
</script>

Kendo ui MVVM - 如何使用 kendo 模板绑定可观察数组和数组内部数组

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

javascript

jquery

arrays

kendo-ui

kendo-mvvm