This is a migrated thread and some comments may be shown as answers.

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

2 Answers 39 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Thomas
Top achievements
Rank 1
Thomas asked on 27 Nov 2013, 04:03 PM
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 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 28 Nov 2013, 04:06 PM
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!
0
Thomas
Top achievements
Rank 1
answered on 02 Dec 2013, 01:33 PM
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>
Tags
MVVM
Asked by
Thomas
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Thomas
Top achievements
Rank 1
Share this question
or