MVVM and Mobile

9 posts, 0 answers
  1. john
    john avatar
    9 posts
    Member since:
    Jun 2009

    Posted 06 Apr 2012 Link to this post

    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();
               
           });

     

     

     

     

     

     


     


  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 09 Apr 2012 Link to this post

    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!
  3. john
    john avatar
    9 posts
    Member since:
    Jun 2009

    Posted 09 Apr 2012 Link to this post

    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>

  4. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 09 Apr 2012 Link to this post

    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!
  5. john
    john avatar
    9 posts
    Member since:
    Jun 2009

    Posted 09 Apr 2012 Link to this post

    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!

  6. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 10 Apr 2012 Link to this post

    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!
  7. john
    john avatar
    9 posts
    Member since:
    Jun 2009

    Posted 10 Apr 2012 Link to this post

    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
  8. matt
    matt avatar
    1 posts
    Member since:
    Aug 2012

    Posted 14 Sep 2012 Link to this post

    John, is there any way I could contact you?  Our university is looking to do something similar.
  9. john
    john avatar
    9 posts
    Member since:
    Jun 2009

    Posted 14 Sep 2012 Link to this post

    sure jmcfet@bellsouth.net   or 352-3594634
Back to Top