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

Question

这是我的工作 DEMO .

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

我已经使用剑道模板成功绑定(bind)了 persons 数组，但是有谁知道我应该如何使用另一个模板绑定(bind) 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