KendoUI Mobile ListView/MVVM "Object #<Text> has no method 'getAttribute'

Question

I'm trying to get MVVM working with KendoUI Mobile and am receiving the error as stated, "Object # has no method 'getAttribute'"

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 other weird styling going on

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 javascript, like this (using require):

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'
            }
        ]
    })
  }
});

Answer 1

The KendoUI Mobile framework automatically creates the <li> and </li> elements for the data-role="listview"; therefore, removing those from the template and leaving the template as below will resolve the issue:

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