hi there,
i am evaluating the use of kendo mobile in my company and come across an issue i cannot resolve on my own. i use the latest minified version of the library from yesterday.
i have a view with a form that is bound to a viewmodel. on button click a function in the viewmodel is called which calls app.navigate to get to a listview with search results that are loaded as json array from a server based on the options entered in the form.
the single parts work for me so far. i can pull the server response, parse the json and can edit the viewmodel with the form. when the user clicks the button to send the search, the listview will be initialized (via data-init) and the datasource will be updated with the correct search options from the viewmodel.
but then the initializer is called a second time and only got the initial values from the viewmodel. i nailed it down to document.ready was called a second time and therefore the application state was lost. but i cannot figure out what is causing this.
i am evaluating the use of kendo mobile in my company and come across an issue i cannot resolve on my own. i use the latest minified version of the library from yesterday.
i have a view with a form that is bound to a viewmodel. on button click a function in the viewmodel is called which calls app.navigate to get to a listview with search results that are loaded as json array from a server based on the options entered in the form.
the single parts work for me so far. i can pull the server response, parse the json and can edit the viewmodel with the form. when the user clicks the button to send the search, the listview will be initialized (via data-init) and the datasource will be updated with the correct search options from the viewmodel.
but then the initializer is called a second time and only got the initial values from the viewmodel. i nailed it down to document.ready was called a second time and therefore the application state was lost. but i cannot figure out what is causing this.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
></
title
>
<
link
href
=
"styles/kendo.mobile.all.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"inwx.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
src
=
"js/jquery.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"js/kendo.mobile.min.js"
type
=
"text/javascript"
></
script
>
</
head
>
<
body
>
<
div
id
=
"menu"
data-role
=
"view"
data-title
=
"Start"
>
<
div
class
=
"head"
> </
div
>
<
ul
data-role
=
"listview"
data-style
=
"inset"
data-type
=
"group"
id
=
"listview-menu"
>
<
li
>I want to:
<
ul
>
<
li
data-icon
=
"play"
><
a
href
=
"#searchform"
>search domains</
a
></
li
>
</
ul
>
</
li
>
</
ul
>
</
div
>
<
div
data-role
=
"view"
data-title
=
"Destinations"
id
=
"domainlist"
data-init
=
"initListView"
>
<
ul
data-role
=
"listview"
data-style
=
"inset"
data-type
=
"group"
id
=
"listview-domains"
>
</
ul
>
</
div
>
<
div
id
=
"searchform"
data-role
=
"view"
data-title
=
"Domain Search"
data-init
=
"initForm"
>
<
form
>
<
ul
data-role
=
"listview"
data-style
=
"inset"
>
<
li
>
<
select
id
=
"region-value"
data-bind
=
"source: regions, value: region"
></
select
>
search region
</
li
>
<
li
>
<
input
id
=
"domain-value"
type
=
"text"
data-bind
=
"value: domain"
/>
domain
</
li
>
</
ul
>
<
button
data-bind
=
"click: startSearch"
>search</
button
>
</
form
>
</
div
>
<
script
type
=
"text/x-kendo-template"
id
=
"domainlistItemTemplate"
>
<
li
data-icon=
# if (status == 'used') { #
"globe"
#} else {#
"toprated"
#}#>
#: domain #
</
li
>
</
script
>
<
script
>
var template = kendo.template($("#domainlistItemTemplate").html());
</
script
>
<
script
src
=
"domainlist.js"
type
=
"text/javascript"
></
script
>
</
body
>
</
html
>
var
initForm;
var
initListView;
$(document).ready(
function
(){
alert(
"ready"
);
var
app =
new
kendo.mobile.Application(document.body);
var
domainsearchModel =
new
kendo.data.ObservableObject({
domain:
"sebastian"
,
region:
"EUROPE"
,
regions: [
"EUROPE"
,
"ASIA"
,
"AMERICAS"
,
"AFRICA"
,
"ALL"
],
startSearch:
function
() {
app.navigate(
"#domainlist"
);
}
});
var
domainlistSource =
new
kendo.data.DataSource({
transport: {
read: {
type:
"POST"
,
dataType:
"json"
,
data: {
d:
function
() {
return
domainsearchModel.get(
"domain"
);
},
r:
function
() {
return
domainsearchModel.get(
"region"
)
}
}
}
},
schema: {
data:
function
(data) {
return
data.items;
},
type:
"json"
},
group: {
field:
"country"
},
filter: [{
field:
"status"
,
operator:
"neq"
,
value:
"error"
}, {
field:
"status"
,
operator:
"neq"
,
value:
"timeout"
}, {
field:
"status"
,
operator:
"neq"
,
value:
"yours"
}, {
field:
"status"
,
operator:
"neq"
,
value:
"unsupported"
}],
pagesize: 20
});
$(
"#listview-domains"
).kendoMobileListView({
style:
"inset"
,
template:
"#: domain #"
,
// template: template,
dataSource: domainlistSource
});
initForm =
function
() {
var
body = $(
".km-vertical,.km-horizontal"
);
kendo.bind($(
"#searchform"
), domainsearchModel);
};
initListView =
function
() {
};
});