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

3 posts, 1 answers
  1. Answer
    Thomas
    Thomas avatar
    5 posts
    Member since:
    Nov 2013

    Posted 27 Nov 2013 Link to this post

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

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 28 Nov 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Thomas
    Thomas avatar
    5 posts
    Member since:
    Nov 2013

    Posted 02 Dec 2013 Link to this post

    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>
Back to Top