script src="../js/jquery.min.js"></script>
<script src="../js/kendo.mobile.min.js"></script>
<script src="../js/kendo.binder.min.js"></script>
Now in Google Chrome debugger I see the exception:
Uncaught ReferenceError: ProductID is not defined
As I look in Fiddler I see that the service (JSONP) call was never issued and must
believe this is the issue. Hopefully MVVM binding can be made to work in
the mobile app as I am evaluating Kendo against Sencha Touch which has
a wonderful built in MVC pattern. I will not let code be written here
without use of patterns like MVC abd MVVM so this is not a nice feature
but a requirement in our choice.
I then made a couple of changes to the code that seemed promising:
1. I added a statement to force the read after the viewModel definition
viewModel.productsSource.read();
Now I see the JSON data in Fiddler with the ProductID but still get the same error. Now I understand that
the datasource should contain observables which should cause the data binding to occur when the JSON data is read. This does not seem to be happening so I added a change method to the datasource that fires wnen the data has been read.It looks like:
change:function() {
kendo.bind($("#form-container"), viewModel);
},
Now I place a breakpoint on this line and it is hit and the same exception is occuring, hopefully I am missing the obvious! The complete code looks like (HTML is unchanged from example)
var crudServiceBaseUrl = "http://demos.kendoui.com/service"; $(document).ready(function() { var viewModel = kendo.observable({ productsSource: new kendo.data.DataSource({ transport: { read: { url: crudServiceBaseUrl + "/Products", dataType: "jsonp" }, update: { url: crudServiceBaseUrl + "/Products/Update", dataType: "jsonp" }, destroy: { url: crudServiceBaseUrl + "/Products/Destroy", dataType: "jsonp" }, parameterMap: function(options, operation) { if (operation !== "read" && options.models) { return { models: kendo.stringify(options.models) }; } return options; } }, change: function() { kendo.bind($("#form-container"), viewModel); }, batch: true, schema: { model: { id: "ProductID" } } }), selectedProduct: null, hasChanges: false, save: function() { this.productsSource.sync(); this.set("hasChanges", false); }, remove: function() { if (confirm("Are you sure you want to delete this product?")) { this.productsSource.remove(this.selectedProduct); this.set("selectedProduct", this.productsSource.view()[0]); this.change(); } }, showForm: function() { return this.get("selectedProduct") !== null; }, }); viewModel.productsSource.read(); });
8 Answers, 1 is accepted
The example you have taken uses the drop down list widget from the web suite - this is the reason for the errors you are experiencing.
I am attaching a sample page demonstrating the needed approach. Mind that Kendo UI Mobile features some specific styling rules, which are not exactly compatible with that demo.
Greetings,
Petyo
the Telerik team
Rank 1
script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
then things worked as expected, I think u need to a add an MVVM example to the mobile examples, for what it is worth here is mine that uses a Azure WCF service. I will now look at implementing a good MVVM pattern to match Sencha's MVC. I must point ot that their learning curve is much shorter as the MVC pattern comes out of the box and the examples are much better.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.mobile.all.min.css" rel="stylesheet" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script> <script id="listitem-template" type="text/x-kendo-template"> <li> <span data-bind="text:FullName"></span> </li> </script> </head><body> <div data-role="view" id="navbar-home" data-title="Contacts" data-init="bindForm" > <header data-role="header"> <div data-role="navbar"> <a id="back-button" class="nav-button" data-align="left" data-role="backbutton">Back</a> <span data-role="view-title">Contacts</span> <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a> <a data-align="right" data-icon="organize" data-role="button" href="#navbar-grouped">Group</a> </div> </header> <ul id="ContactsListView" data-role="listview" data-template="listitem-template" data-bind="source: LiveDataSource"> </ul> <div data-role="footer">Footer</div> </div> <div data-role="view" id="tabstrip-rating" data-title="Rating" data-layout="mobile-tabstrip" > </div> <script> new kendo.mobile.Application(); var viewModel = kendo.observable({ LiveDataSource: new kendo.data.DataSource({ transport: { read: { // the remote service url // JSONP is required for cross-domain AJAX dataType: "jsonp" } } }), hasChanges: false, change: function () { this.set("hasChanges", true); } }); function bindForm() { kendo.bind($("#ContactsListView"), viewModel); } </script> <script> </script></body></html>You can take a look at our open source Sushi mobile application source code, which demonstrates both MVVM and non-MVVM implementation.
Regards,
Petyo
the Telerik team
Rank 1
I was able to get most of my functionality ub place but am curious about the MVVM data binding as I thought the way it worked was thru
data-bind attribute like but I had to use hashes as in your example .so my ListItem template looks like:
class="details-link"
href="\#details"
<span>#:FullName#</span>
why not <span>data-bind="text:FullName></> having 2 forms is not good!
Some of the markup used in the post is messed up, but I think that I got your question. The #:FullName# syntax comes from Kendo Templates, which are used with the databound widgets.
Kind regards,
Petyo
the Telerik team
Rank 1
Rank 1
Rank 1