This question is locked. New answers and comments are not allowed.
I'm trying to extend the ViewModel style used in a Kendo UI demo app so that I can reload a listview with different data based on a param value from a selected list item. Here's a ViewModel modelled after the demo:
It's attached to a view like this:
​
I have a static list view below linking to the list view above.
How can I change the datasource before the view renders using the 'id' params from Topic A and Topic B?
(
function
(global) {
var
TopicViewModel,
app = global.app = global.app || {};
TopicViewModel = kendo.data.ObservableObject.extend({
topicDataSource:
null
,
init:
function
() {
var
that =
this
,
dataSource;
kendo.data.ObservableObject.fn.init.apply(that, []);
dataSource =
new
kendo.data.DataSource({
transport: {
read: {
url:
"data/topic.json"
,
dataType:
"json"
}
}
});
that.set(
"topicDataSource"
, dataSource);
}
});
app.topicService = {
viewModel:
new
TopicViewModel()
};
})(window);
It's attached to a view like this:
<
div
data-role
=
"view"
id
=
"view-topic"
data-layout
=
"mobile-view"
data-title
=
"Topics"
data-model
=
"app.topicService.viewModel"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
header
>
<
ul
id
=
"listview"
data-role
=
"listview"
data-style
=
"inset"
data-template
=
"list-item-template"
data-bind
=
"source:topicDataSource"
>
</
ul
>
</
div
>
<
script
id
=
"list-item-template"
type
=
"text/x-kendo-tmpl"
>
<
a
data-bind
=
"click:listItemSelected"
>${title}</
a
>
</
script
>
​
I have a static list view below linking to the list view above.
<
ul
data-role
=
"listview"
data-style
=
"inset"
data-type
=
"group"
>
<
li
>
<
ul
>
<
li
><
a
href
=
"#view-topic?action=load-topic&id=1"
>Topic A</
a
></
li
>
<
li
><
a
href
=
"#view-topic?action=load-topic&id=2"
>Topic B</
a
></
li
>
</
ul
>
</
li
>
</
ul
>
How can I change the datasource before the view renders using the 'id' params from Topic A and Topic B?