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

2 posts, 1 answers
  1. Dan
    Dan avatar
    2 posts
    Member since:
    Jul 2014

    Posted 27 Aug 2014 Link to this post

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

  2. Answer
    Martin Yankov
    Admin
    Martin Yankov avatar
    177 posts

    Posted 29 Aug 2014 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top