jquerykendo-uikendo-mvvm

kendo mvvm binding not working properly

I am using kendo observable to bind a page. Following code work as I expected, IssueHeaders is a object array and it have two items. first template render properly two times, and its sub template 8 times.

 <div data-template="issue-detail-template" data-bind="source: IssueHeaders"></div>

<script id="issue-detail-template" class="issue-detail-template"  type="text/x-kendo-template">        
    <div  data-template="issue-group-detail-template" data-bind="source:IssueGroups"></div>
</script>

<script id="issue-group-detail-template" class="issue-group-detail-template" type="text/x-kendo-template">
    <span class="kptext" data-bind="text : Name"></span> 
</script>

enter image description here But when I add Name to first template it render only first item.

<script id="issue-detail-template" class="issue-detail-template"  type="text/x-kendo-template">
    <span data-bind="text : Name"></span>
    <div  data-template="issue-group-detail-template" data-bind="source:IssueGroups"></div>
</script>

enter image description here

Why ? what have i done wrong ?

Solution

  • Enclose the template content inside a div tag to fix the issue:

    <script id="issue-detail-template" class="issue-detail-template"  type="text/x-kendo-template">
    <div>
        <span data-bind="text : Name"></span>
        <div  data-template="issue-group-detail-template" data-bind="source:IssueGroups"></div>
    </div>
</script>

    This gives the template content a single root element and the templating process then works correctly. Exactly as to why, I cannot say, other than this is simply a quirk/shortcoming to be aware of.