When I use the **** data-bind="source: datasource" **** setting on a ListView within a Mobile View, I end up with all of my data on one long, single list item, instead of separate items. What a I doing wrong? Is this an inappropriate use of data-bind?
If I instead initiate the ListView separately in Javascript then it properly displays the items... though we were trying to pass all of this through MVVM. Is this not the right way to do this?
If I instead initiate the ListView separately in Javascript then it properly displays the items... though we were trying to pass all of this through MVVM. Is this not the right way to do this?
<!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>4 Answers, 1 is accepted
0
Hi Dan,
To achieve that I recommend using the model property of the mobile view that defines the MVVM model to bind to. For example:
To illustrate the approach I created a small demo.
Regards,
Alexander Valchev
the Telerik team
To achieve that I recommend using the model property of the mobile view that defines the MVVM model to bind to. For example:
<div data-role="view" data-model="viewModel" data-title="My Database" id="vMyDatabase"> <ul id="lMyDatabase" data-role="listview" data-style="inset" data-template="tMyDatabase" data-bind="source: MyDatabase, events: { click: ShowCustomer }"> </ul></div>To illustrate the approach I created a small demo.
Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dan
Top achievements
Rank 1
Rank 1
answered on 02 Jul 2012, 02:56 PM
Thank you! The major difference between my code and your fix is that I was doing this:
And you instead did it in the view <div>
In fact I have found that the first way (initializing it in Javascript) doesn't seem to work at all in my scenarios. Can you confirm when each approach should be used and the difference?
kendo.bind($("#vMyDatabase"), viewModel);And you instead did it in the view <div>
<div data-role="view" data-title="My Database" id="vMyDatabase" data-model="viewModel"> ... etc</div>In fact I have found that the first way (initializing it in Javascript) doesn't seem to work at all in my scenarios. Can you confirm when each approach should be used and the difference?
0
Accepted
Hello Dan,
I am glad that to hear the issue is resolved. The kendo.bind method is commonly used in KendoUI Web pages, while the recommended way to bind a mobile view to MVVM model is via the model configuration option.
Kind regards,
Alexander Valchev
the Telerik team
I am glad that to hear the issue is resolved. The kendo.bind method is commonly used in KendoUI Web pages, while the recommended way to bind a mobile view to MVVM model is via the model configuration option.
Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
d2uX
Top achievements
Rank 1
Rank 1
answered on 06 Jul 2012, 11:21 AM
Hi there,
I have a similar issue with binding data to a list view nad since i didnt want to start a new thread I'm asking here.
With the previous hints I got (at least) a soinner working which indicates that some data is being loaded.
Nevertheless there's no data showing up in my list.
I also tried to follow the MVVM-pattern, so here is my code for getting the data:
In my html-file I am binding this to a list-view:
Additionally: Is there any way to "debug" such requests and see where it "hangs"? I can see that the json data (that the server responds) is correct, so I guess it's somewhere in the defined model (fields)!?
And is there a way to separate the template from the actual html (defining it in the VProducts)?
Thx in advance
I have a similar issue with binding data to a list view nad since i didnt want to start a new thread I'm asking here.
With the previous hints I got (at least) a soinner working which indicates that some data is being loaded.
Nevertheless there's no data showing up in my list.
I also tried to follow the MVVM-pattern, so here is my code for getting the data:
var VProducts = new kendo.observable({ list: new kendo.data.DataSource({ transport: { read: { url: "/get.php", contentType: "application/json; charset=utf-8", type: "GET", dataType: "ajax", data: { type: "products" } } }, schema: { model: { fields: { name: 'name', desc: 'desc', price: 'price' } } } })});In my html-file I am binding this to a list-view:
<div data-role="view" data-title="Home" id="vHome" data-transition="slide" data-model="VProducts"> <ul data-role="listview" data-style="inset" data-bind="source: list" data-template="TProducts"> </ul></div><script id="TProducts" type="text/x-kendo-template"> <li> <div style="font-weight:bold;">#= name #</div> <div style="font-weight:normal;font-size:smaller">#= desc #</div> <div style="font-weight:normal;font-size:smaller">ID: #= price #</div> </li></script>Additionally: Is there any way to "debug" such requests and see where it "hangs"? I can see that the json data (that the server responds) is correct, so I guess it's somewhere in the defined model (fields)!?
And is there a way to separate the template from the actual html (defining it in the VProducts)?
Thx in advance