or
<!DOCTYPE html>
<
html
>
<
head
>
<
script
src
=
"jquery.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"kendo.all.min.js"
type
=
"text/javascript"
></
script
>
<
link
href
=
"kendo.mobile.all.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"kendo.common.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"kendo.default.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
</
head
>
<
body
>
<
div
data-role
=
"view"
data-title
=
"Home"
id
=
"vHome"
data-transition
=
"slide"
>
<
ul
data-role
=
"listview"
data-style
=
"inset"
>
<
li
><
a
href
=
"#vMyDatabase"
>This Breaks</
a
></
li
>
<
li
><
a
href
=
"#vMyDatabase2"
>This Works</
a
></
li
>
</
ul
>
</
div
>
<
div
data-role
=
"view"
data-title
=
"My Database"
id
=
"vMyDatabase"
>
<
ul
id
=
"lMyDatabase"
data-role
=
"listview"
data-style
=
"inset"
data-template
=
"tMyDatabase"
data-bind
=
"click: ShowCustomer, source: MyDatabase"
>
</
ul
>
</
div
>
<
div
data-role
=
"view"
data-title
=
"My Database"
id
=
"vMyDatabase2"
data-init
=
"initTest"
>
<
ul
id
=
"lMyDatabase2"
data-role
=
"listview"
data-style
=
"inset"
data-template
=
"tMyDatabase"
>
</
ul
>
</
div
>
<
script
id
=
"tMyDatabase"
type
=
"text/x-kendo-template"
>
<
div
style
=
"font-weight:bold;"
>#= Name #</
div
>
<
div
style
=
"font-weight:normal;font-size:smaller"
>#= City #, #= State #</
div
>
<
div
style
=
"font-weight:normal;font-size:smaller"
>ID: #= ID #</
div
>
</
script
>
<
script
type
=
"text/javascript"
>
var TestData = [
{ Name: "Company A", City: "Phoenix", State: "AZ", ID: "00000001" },
{ Name: "Company B", City: "Los Angeles", State: "CA", ID: "00000002" },
{ Name: "Company C", City: "Santa Fe", State: "NM", ID: "00000003" },
{ Name: "Company D", City: "Boulder", State: "CO", ID: "00000004" },
{ Name: "Company E", City: "Seattle", State: "WA", ID: "00000005" },
{ Name: "Company F", City: "Portland", State: "OR", ID: "00000006" },
{ Name: "Company G", City: "San Diego", State: "CA", ID: "00000007" },
{ Name: "Company H", City: "Boise", State: "ID", ID: "00000008" },
];
var app = new kendo.mobile.Application($(document.body), {
initial: "vHome"
});
var viewModel = kendo.observable({
ShowCustomer: function(e) {
// something here for drilldown
},
MyDatabase: new kendo.data.DataSource.create({ data: TestData })
});
kendo.bind($("#vMyDatabase"), viewModel);
// And this way works
var dsMyDatabase = new kendo.data.DataSource.create({ data: TestData })
function initTest() {
$("#lMyDatabase2").kendoMobileListView({
dataSource: dsMyDatabase,
template: $("#tMyDatabase").text(),
style: "inset",
click: function (e) {
// something here for drilldown
}
});
}
</
script
>
</
body
>
</
html
>
<script>
new kendo.mobile.Application($(document.body), {
loading: "myNewLoadingText"
});
</script>