MVVM and ListView Object #<Text> has no method 'getAttribute'

[Thomas]

I'm trying to get MVVM working with KendoUI Mobile and am receiving the error as stated, "Object #<Text> has no method 'getAttribute'" (kendo.all.min.js:12)

The binding DOES appear to be working, but the rending of the page is very messed up.  For example, I do see a list of items with the #: linkText # that I'd expect, except the view no longer looks like an iPhone, the links don't work, and there is some weird styling going on (for reference, I've attached screenshots of the data-binded listview and a version with hardcoded <li> items -- that is, the only between the pages is how the <li>'s are created)

Anyways, I have a view and template, like this:

<div data-role="view" id="home-view" data-layout="default" data-title="Hello World!"
     data-init="app.views.home.init"
     data-before-show="app.views.home.beforeShow"
     data-show="app.views.home.show"
     data-model="app.views.home.viewModel">

    <ul data-role="listview" data-bind="source: navigation" data-template="navigation-template"></ul>
</div>

<script id="navigation-template" type="text/x-kendo-template">
    <li>
        <a href="#: url #">#: linkText #</a>
    </li>
</script>

And the script that looks like this:

define(["kendo"], function (kendo) {
    return {
        init: function (initEvt) {

        },
        beforeShow: function (beforeshowEvt) {

        },
        show: function (showEvt) {

        },
        viewModel: kendo.observable({
            navigation: [
                {
                    linkText: 'My Data',
                    url: 'myData'
                },
                {
                    linkText: 'My Purchase Requests',
                    url: 'myPurchaseRequests'
                },
                {
                    linkText: 'My Purchase Orders',
                    url: 'myPurchaseOrders'
                },
                {
                    linkText: 'Pending PR Tasks',
                    url: 'pendingPrTasks'
                },
                {
                    linkText: 'Pending PO Tasks',
                    url: 'pendingPoTasks'
                }
            ]
        })
    }
});

[Alexander Valchev]

Hi Thomas,

The strange artifacts which you see in the ListView occur because your template contains a <li> root element which is not supported. The content of the ListView item should not be wrapped in <li> tag by the developer - the framework does that automatically.

Apart from that, your code looks OK. I am not sure where the other issues comes from. Could you please provide a small but runable jsBin sample which isolates them. In this way we will be able to examine your exact set up in details and advise you further. Thank you in advance for the cooperation.

Regards,
Alexander Valchev
Telerik

[Thomas]

Thank you!  I missed that.

Changing my template to this (below) worked (i.e., removing the surrounding <li> elements)

<script id="navigation-template" type="text/x-kendo-template">
    <a href="#: url #">#: linkText #</a>
</script>