I am currently programing a blog reader application using HTML5 KendoUI Mobile & JavaScript currently i am able to use Json to list all my post in a list view and currently once an item is clicked on it takes me to the actual url of the post within the application. What i want to be able to do is once an item is clicked on display post content in a different view. Please help me!!!
<
div
data-role
=
"view"
data-init
=
"mobileListViewPullToRefresh"
data-title
=
"What's New"
id
=
"tabstrip-whatsnew"
data-layout
=
"mobile-tabstrip"
>
<
ul
id
=
"pull-to-refresh-listview"
></
ul
>
</
div
>
<
script
id
=
"pull-to-refresh-template"
type
=
"text/x-kendo-template"
>
<
div
class
=
"post"
>
<
a
href
=
"#= url #"
><
img
class
=
"menuimage"
src
=
"#= thumbnail_images.full.url #"
alt
=
"#= title #"
/></
a
>
<
a
href
=
"#= url #"
><
span
class
=
"title"
>#= title #</
span
> </
a
>
</
div
>
</
script
>
<
script
>
function mobileListViewPullToRefresh() {
var dataSource = new kendo.data.DataSource({
serverPaging: true,
pageSize: 10,
transport: {
read: {
url: "http://www.iviewsource.com/?json=recentstories", // the remote service url - Twitter API v1.1
dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
},
parameterMap: function(options) {
return {
q: "javascript",
count: options.pageSize
};
}
},
schema: { // describe the result format
// the data which the data source will be bound to is in the "results" field
data: function(data) {
return data.posts || [];
}
}
});
$("#pull-to-refresh-listview").kendoMobileListView({
dataSource: dataSource,
pullToRefresh: true,
appendOnRefresh: true,
template: $("#pull-to-refresh-template").text()
});
}
</
script
>