RemoteDataSource in Upshot.js

RemoteDataSource in Upshot.js can be used to fetch and save data using DataProvider.

Let’s see it’s constructor.

RemoteDataSource takes an options object as single parameter.

The options can have following parameters:

1. bufferChanges: (Optional) If ‘true’, edits to model data are buffered until RemoteDataSource.commitChanges.  Otherwise, edits are committed to the server immediately.
            
2. result:
(Optional) The observable array into which the RemoteDataSource will load model data.
       
3. dataContext:
(Optional) A DataContext instance that acts as a shared cache for multiple DataSource instances.  When not supplied, a DataContext instance is instantiated for this RemoteDataSource.
       
4. entityType:
The type of model data that will be loaded by this RemoteDataSource instance.
       
5. provider:
(Optional) Specifies the DataProvider that will be used to get model data and commit edits to the model data.  Defaults to upshot.DataProvider which works with System.Web.Http.Data.DataController.
       
6. providerParameters:
(Optional) Parameters that are supplied to the DataProvider for this RemoteDataSource and used by the DataProvider when it gets model data from the server.
       
7. mapping:
(Optional) A function (typically a constructor) used to translate raw model data loaded via the DataProvider into model data that will be surfaced by this RemoteDataSource.
       

RemoteDataSource have four public methods:

1. setSort : Establishes the sort specification that is to be applied as part of a server query when loading model data.

Parameter: sort (required)

Should be supplied as an object of the form { property: <propertyName> [, descending: <bool> ] } or an array of ordered objects of this form.
 
When supplied as null or undefined, the sort specification for this RemoteDataSource is cleared.

2. setFilter : Establishes the filter specification that is to be applied as part of a server query when loading model data.

Parameter: filter (required)

Should be supplied as an object of the form { property: <propertyName>, value: <propertyValue> [, operator: <operator> ] } or an array of ordered objects of this form.
 
When supplied as null or undefined, the filter specification for this RemoteDataSource is cleared.

3. refresh: Initiates an asynchronous get to load model data matching the query established with setSort, setFilter and setPaging.

Parameters:

  1. options (optional) : There are no valid options recognized by RemoteDataSource.
  2. success (optional) : A success callback with signature function(entities, totalCount).
  3. error(optional): An error callback with signature function(httpStatus, errorText, context).

OData access using jsonp

The upshot.js ver. 1.0 does not support jsonp calls. To enable jsonp I have modified the DataProvider.OData get method enable jsonp callback like this.

var jsonpCall ;
            if (parameters) {
                operation = parameters.operationName;
                operationParameters = parameters.operationParameters;
                jsonpCall = parameters.jsonpCall ? (parameters.jsonpCall === true): false;
            }
            if(jsonpCall){
              OData.defaultHttpClient.enableJsonpCallback = true;
             }

Using odata provider access Netflix OData :

(function () {
    var Netflix = window.Netflix = window.Netflix || {};

    Netflix.Movie = function (properties) {
        var self = this;

        self.Name = properties.Name;
        self.ShortName = properties.ShortName;
        self.ShortSynopsis = properties.ShortSynopsis;
        self.AverageRating = properties.AverageRating;
        self.ReleaseYear = properties.ReleaseYear;
        self.Runtime = properties.Runtime;

    }
    Netflix.Movie.Type = "Title:#Netflix.Catalog.v2"

    Netflix.CourseViewModel = function (options) {
        var self = this;

        var dataprovider = new upshot.ODataDataProvider();
        var courseDataSourceParameters = {
            provider: dataprovider,
            providerParameters: { url: options.serviceUrl, dataType: 'jsonp', operationName: "Titles", operationParameters: { "$top": "10"}, jsonpCall : true },            
            entityType: Netflix.Movie.Type,
            bufferChanges: true
        };
        var courseDataSource = new upshot.RemoteDataSource(courseDataSourceParameters);
        self.Titles = [];
        courseDataSource.refresh({}, function (entities, totalCount) {
            self.Titles = [];
            $.each(entities, function (index, item) {
                var entity = new Netflix.Movie(item);
                self.Titles.push(entity);
            });

            alert("Total movies loaded " + self.Titles.length);
        });

    }

})();
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s