Uncaught TypeError: Object #<Text> has no method 'getAttribute' at kendo/js/kendo.mobile.min.js (line: 12)

[Dan]

 I'm updating my View-Model with collection. Every time I update my collection property an error shows up in Device Simulator window: Uncaught TypeError: Object #<Text> has no method 'getAttribute' at kendo/js/kendo.mobile.min.js (line: 12)

The view gets updated and throws the error in that.set("dueDates", list); line.


Here's my View-Model:

(function (global) {
    var app = global.app || {};

    var homeViewModel = kendo.data.ObservableObject.extend({
        dueDates: [],

        showItems: function () {
            var that = this;
            var list = [
                { Name: "Test 1", Desc: "Test 2" },
                { Name: "Test 2", Desc: "Test 2" },
                { Name: "Test 3", Desc: "Test 3" },
            ];
            that.set("dueDates", list);
        }
    });

    app.Home = { viewModel: new homeViewModel() };
}(window));

Here's my View:

<div id="delta-home"
     data-model="app.Home.viewModel"
     data-role="view"
     data-layout="main-tab"
     data-title="Home">
    <ul data-role="listview"
        data-bind="source: dueDates"
        data-template="home-dl-tmpl"></ul>
    <button id="show-dls-btn"
            data-bind="click: showItems">Refresh</button>
</div>
<script id="home-dl-tmpl" type="text/x-kendo-template">
    <li>
        <div class="dl-list-item">
            <div class="name">${Name}</div>
            <div class="desc">${Desc}</div>
        </div>
    </li>
</script>

I tried overriding the init method to initialize my collection but the problem still shows:

init: function () {
            kendo.data.ObservableObject.fn.init.call(this, {
                dueDates: this.dueDates
            });
 },

Going another way by manually removing the items and replacing a new array and it display only a single item to the view. The same error:

var list = [
     { Name: "Test 1", Desc: "Test 2" },
     { Name: "Test 2", Desc: "Test 2" },
     { Name: "Test 3", Desc: "Test 3" },
 ];
 var dueDates = that.get("dueDates");
 dueDates.splice(0, dueDates.length);
 $(list).each(function () {
    dueDates.push(this);
});

[Martin Yankov]

Hi Dan,

The Kendo Mobile ListView template is automatically wrapped in <li> elements. Putting a <li> tag inside the template creates invalid nesting of elements. Remove the <li> element wrapping in the Kendo template and the errors should disappear.

Let me know should you have any other questions.

Regards,
Martin Yankov
Telerik