Hello,
I'm trying to bind the Kendo UI Mobile ListView to a datasource in a viewmodel :
HTML :
Javascript :
But, it doesn't work, the content of my listview is :
function Number() { [native code] } - function Object() { [native code] }
What am I doing wrong ?
Cordially,
Kakone.
I'm trying to bind the Kendo UI Mobile ListView to a datasource in a viewmodel :
HTML :
<ul id="projectsListView" data-role="listview" data-style="inset" data-template="list-template" data-bind="source: projects"></ul><script id="list-template" type="text/x-kendo-template"> <strong>#: Number #</strong> - #: Object #</script>var viewModel = kendo.observable({ projects: new kendo.data.DataSource( { type: "odata", transport: { read: url } }) });
kendo.bind($("#projectsListView"), viewModel);But, it doesn't work, the content of my listview is :
function Number() { [native code] } - function Object() { [native code] }
What am I doing wrong ?
Cordially,
Kakone.
7 Answers, 1 is accepted
0
Hello Stéphane,
Number and Object are JavaScript primitives and in case they match your model fields name, you could use data.Number and data.Object to access them. For example:
I hope this will help.
Regards,
Iliana Nikolova
the Telerik team
Number and Object are JavaScript primitives and in case they match your model fields name, you could use data.Number and data.Object to access them. For example:
<script id="list-template" type="text/x-kendo-template"> <strong>#: data.Number # </strong> - #: data.Object #<br/></script>I hope this will help.
Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kakone
Top achievements
Rank 1
Rank 1
answered on 27 Mar 2012, 04:18 PM
Hello,
it doesn't work. If I use data.Number and data.Object, now, in my listview, I obtain :
undefined - undefined
So, I tried different things. If I don't bind the listview to my viewmodel and I do this :
it works well.
Or, if I replace the viewmodel like this :
it works well too.
It doesn't work only when I try to bind the listview source to a KendoUI DataSource.
Cordially,
Kakone.
it doesn't work. If I use data.Number and data.Object, now, in my listview, I obtain :
undefined - undefined
So, I tried different things. If I don't bind the listview to my viewmodel and I do this :
$("#projectsListView").kendoMobileListView({ dataSource: myODataDataSource, style: "inset", template: "<strong>${Number}</strong> - ${Object}"})Or, if I replace the viewmodel like this :
var viewModel = kendo.observable({ projects: [ { Object: "Test 1", Number: 1 }, { Object: "Test 2", Number: 2 } ]});It doesn't work only when I try to bind the listview source to a KendoUI DataSource.
Cordially,
Kakone.
0
Hi Kakone,
I examined the code you sent and it looks OK. I believe the problem is caused by the data you use in the project. Please check if the format and the fields definition match the raw data correctly.
Greetings,
Iliana Nikolova
the Telerik team
I examined the code you sent and it looks OK. I believe the problem is caused by the data you use in the project. Please check if the format and the fields definition match the raw data correctly.
Greetings,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kakone
Top achievements
Rank 1
Rank 1
answered on 04 Apr 2012, 02:39 PM
Hi,
The problem is not caused by the data. This is a complete sample that doesn't work with the OData sample service :
Cordially,
Kakone.
The problem is not caused by the data. This is a complete sample that doesn't work with the OData sample service :
<!DOCTYPE html><html><head> <title>Test</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> <meta charset="utf-8"> <link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css" /> <script src="jquery.min.js"></script> <script src="js/kendo.mobile.min.js"></script> <script src="js/kendo.binder.min.js"></script> <script> function onViewInit() { var url = "http://services.odata.org/OData/OData.svc/Categories"; var dataSource = new kendo.data.DataSource( { type: "odata", transport: { read: url } }); /*$("#categoriesListView").kendoMobileListView({ dataSource: dataSource, style: "inset", template: "<strong>${Name}</strong>" });*/ var viewModel = kendo.observable({ categories: dataSource }); kendo.bind($("categoriesListView"), viewModel); } </script></head><body> <div data-role="view" id="categoriesView" data-init="onViewInit"> <ul id="categoriesListView" data-role="listview" data-style="inset" data-template="list-template" data-bind="source: categories"> </ul> <script id="list-template" type="text/x-kendo-template"> <strong>#: data.Name #</strong></br> </script> </div> <script> var app = new kendo.mobile.Application(); </script></body></html>Cordially,
Kakone.
0
Hi,
The recommended approach in this case is to use the view model configuration option.
Greetings,
Petyo
the Telerik team
The recommended approach in this case is to use the view model configuration option.
Greetings,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kakone
Top achievements
Rank 1
Rank 1
answered on 04 Apr 2012, 05:23 PM
If I pass a string (a reference to the view model variable in the global scope), it works.
But, if I don't want to create all the view models in the global scope, I would like to set the view model by code (in the view initialization event for example). In this case, it doesn't work, why ?
Cordially,
Kakone.
But, if I don't want to create all the view models in the global scope, I would like to set the view model by code (in the view initialization event for example). In this case, it doesn't work, why ?
function onViewInit(e) { var viewModel = kendo.observable({ categories: dataSource }); e.view.model = viewModel; }Cordially,
Kakone.
0
Hello Kakone ,
I think the problem is caused by the wrong selector:
In order to select the element through ID you need to use :
I hope this helps.
Greetings,
Iliana Nikolova
the Telerik team
I think the problem is caused by the wrong selector:
kendo.bind($("categoriesListView"), viewModel);In order to select the element through ID you need to use :
kendo.bind($("#categoriesListView"), viewModel);I hope this helps.
Greetings,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!