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

MVVM Binding + Refresh

3 Answers 485 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Luke
Top achievements
Rank 1
Luke asked on 03 Apr 2014, 06:43 AM
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



3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 04 Apr 2014, 02:48 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Luke
Top achievements
Rank 1
answered on 06 Apr 2014, 06:37 AM
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
0
Kiril Nikolov
Telerik team
answered on 09 Apr 2014, 05:53 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
MVVM
Asked by
Luke
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Luke
Top achievements
Rank 1
Share this question
or