MVVM Binding + Refresh

[Luke]

Hi Guys

I am new to Kendo MVVM and trying to decipher a way to correctly implement the architecture. I have read many posts and put together a working implementation which I would like to get your take on:

My view.

define(['kendo', 'data', 'utils', 'config'], function (kendo, data, utils, config) {
   var _runInit = false;
   var browseViewModel = kendo.observable({
      browseSource: data.browseServices(),
      itemClick: function (e) {
         window.localStorage["RequestId"] = e.dataItem.RequestId;
         utils.navigate('details.html', 'slide');

      }
   })

   return {
      init: function (initEvt) {

         //kendo.bind($('#serviceDetailsListview'), browseViewModel, kendo.mobile.ui);

      },
      beforeShow: function (beforeShowEvt) {},
      show: function (e) {
         console.log(e.view.params.fromView);
         if (e.view.params.fromView != "detailsPage") {
            if (!_runInit) {
               kendo.bind($('#serviceDetailsListview'), browseViewModel, kendo.mobile.ui);
               _runInit = true;
            } else {
               browseViewModel.set("browseSource", data.browseServices());
            }
         }

      },
      viewModel: browseViewModel
   }
});

Data Source:

var browseServices = function () {

    var browseDataSource = new kendo.data.DataSource({
       requestStart: function (e) {

          utils.showLoading();
       },
       requestEnd: function (e) {
          utils.hideLoading();
       },
       error: function (e) {
          var xhr = e.xhr;
          var statusCode = e.status;
          var errorThrown = e.errorThrown;
          alert("A error has occured fetching data from the server.");
       },
       transport: {
          read: {
             url: config.browseUrl,
             dataType: "json",
             cache: false
          },
          parameterMap: function (options, type) {

             var theSettings = utils.getCurrentSettings();
             return {
                phonelat: window.localStorage["gpsLat"],
                phonelon: window.localStorage["gpsLong"],
                assetId: window.localStorage["AssetId"],
                groupId: window.localStorage["GroupId"],
                serviceId: window.localStorage["ServiceId"],
                range: theSettings.RequestRange

             }
          }
       },
       change: function (e) {
          var data = this.data();

       },
       schema: {
          data: function (response) {

             storage.persistServicesCollection(response.Collection);
             return response.Collection;
          }
       }
    });
    return browseDataSource;

 }

HTML:

<div data-role="view" data-layout="child" data-title="Service Overview" data-show="app.browseView.show" id="serviceDetailsView">

<ul data-role="listview" id="serviceDetailsListview" data-bind="source: browseSource, click: itemClick" data-template="templateServiceDetails" ></ul>

<script type="text/x-kendo-template" id="templateServiceDetails">
     <div class="product">
    <a data-role="detailbutton" data-style="detaildisclose"></a>
      #if (Image != null){#
     <img class="pullImage" src='#: Image.ImageUrl#' />
      #}else{#
       <img class="pullImage" src='images/marker.png' />
        #}#
    <h3>${Address} </h3>
    <p>Range: ${Range} km</p>
    <p>Status: ${Status}</p>
    <p>Created: ${DateCreated}</p>
    </script>
</div>

</div>

It seems to work (as in I am getting the expected result), however, I am not sure if this is the correct implementation? The idea is to refresh the view from the remote source onShow?

Is there a better way to design? Am I missing something?

Thanks in advance
Luke

[Kiril Nikolov]

Hi Luke,

Thank you very much for contacting us.

I have a few remarks for the code that you have.

1). If you want to use a dynamic transport.read.url configuration for the dataSource you can use a dynamic function that will return updated values. It is shown in the following documentation article:

http://docs.telerik.com/kendo-ui/api/framework/datasource#configuration-transport.read.url

2). Furthermore using kendo.bind() in a mobile application is not recommended, especially in the show event. This is because of the fact that when the app is initialized it automatically calls the init on all the widgets, so calling kendo.bind() will init the widgets again which is not officially supported. I would suggest you to use the following pattern when using MVVM in mobile application:

http://docs.telerik.com/kendo-ui/getting-started/mobile/mvvm

I really hope that this information will help.

Regards,
Kiril Nikolov
Telerik

 

 

[Luke]

Hi Kiril

Thanks so much from the feedback. I have amended my code to remove the bind call, and added the data attribute to represent a model via data-model="app.browseView.viewModel". It all seems to work fine, except for the initial page which generates a error (I am calling a remote data source on this page to build a listview) when adding the data-model attribute?

I suspect its got to do with Kendo not being loaded completely before the page is parsed and the binding is executed? Do you have an example of how to handle first page loading?

Thanks
Luke

[Kiril Nikolov]

Hi Luke,

Can you please provide us with a runnable sample of the issue, that we can run locally and see exactly what happens? If you have troubles putting together an example, this blog post might be helpful:

http://www.kendoui.com/blogs/teamblog/posts/13-09-24/how-to-get-the-most-out-of-your-kendo-ui-support.aspx

Regards,
Kiril Nikolov
Telerik