MVVM Binding + Refresh

4 posts, 0 answers
  1. Luke
    Luke avatar
    2 posts
    Member since:
    Apr 2014

    Posted 03 Apr 2014 Link to this post

    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



  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 04 Apr 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Luke
    Luke avatar
    2 posts
    Member since:
    Apr 2014

    Posted 06 Apr 2014 Link to this post

    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
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 09 Apr 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready