This is a migrated thread and some comments may be shown as answers.

MVVM and Mobile

8 Answers 293 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
john
Top achievements
Rank 1
john asked on 06 Apr 2012, 11:13 PM
These seems to be an issue with using MVVM binding for a mobile app  as I took the web example Web MVVM remote-binding and just changed the libraries to:

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

Sort by
0
Petyo
Telerik team
answered on 09 Apr 2012, 09:16 AM
Hello,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
john
Top achievements
Rank 1
answered on 09 Apr 2012, 03:04 PM
Thanks for the quick reply and this makes sense. I looked at your code and made the changes to my "real" test project and still did not see the AJAX call being made but once I pointed my scripts to the same as yours e.g

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">
<head>
    <title></title>
        <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 
                          url: "http://mycontacts.cloudapp.net/Service1.svc/getcontacts",
                          // 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>

0
Petyo
Telerik team
answered on 09 Apr 2012, 03:17 PM
Hi,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
john
Top achievements
Rank 1
answered on 09 Apr 2012, 03:35 PM
Now that is an impressive example , I might be changing my mind on Kendo. we are setting up a Phone App development center at the University of Florida and either you or Sencha will be our main tool. I had almost dismissed Kendo but this changes things. Thanks and your responses are much more timely then Sencha so that is helping alot.

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!

0
Petyo
Telerik team
answered on 10 Apr 2012, 07:42 AM
Hello,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
john
Top achievements
Rank 1
answered on 10 Apr 2012, 02:26 PM
so there are 2 modes on binding 1)MVVM and 2)template. I am surprised as it seems they should be the same as in KnockoutJS does. hopefully this will resolve itself in time. Again that is a great example  and up there with Sencha
0
matt
Top achievements
Rank 1
answered on 14 Sep 2012, 07:48 PM
John, is there any way I could contact you?  Our university is looking to do something similar.
0
john
Top achievements
Rank 1
answered on 14 Sep 2012, 08:10 PM
sure jmcfet@bellsouth.net   or 352-3594634
Tags
General Discussions
Asked by
john
Top achievements
Rank 1
Answers by
Petyo
Telerik team
john
Top achievements
Rank 1
matt
Top achievements
Rank 1
Share this question
or