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:
And the script that looks like this:
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'
}
]
})
}
});