Oracle JET Model Data acquisition and use

Oracle JET Application data can come from any WEB data source that generates JSON data, such as REST services, Server send events (SSE), or WebSocket. In addition, Oracle JET provides specific support for integrated Web services data based on the Oracle REST standard.

About the Oracle JET Common Model and Collection APIs:

• Oj. Model: Represents a single record in a data service such as a REST server. (Get JSON data to set a single data model)
• Oj. Collection: Represents a set of data records, which is OJ. Model the list of objects of the same type. (Collect individual data models or directly use the JSON data model)
• Oj. Events: Provides methods for event handling.
• Oj. Knockoututils: Provides the properties used to OJ the property. Model or OJ. The Collection object maps to a method that is used for the Knockout viewer of the component ViewModels. (Convert collected data into data that can be used in knockout)

Oj. Model and OJ. Collection includes the client API, which provides a way to bring external data into an Oracle JET application.

Oj. Knockoututils provides a way to map () the properties of a model object or all the models in a collection object to the application's view data model.

Case Explanation:

A JSON data

{  "Departments" : [ {    "DepartmentID": 10,    "Departmentname": "Administration",    "ManagerID":NULL,    "LocationID":NULL,    "Version": "Aced00057...contents truncated",    "Links" : {      "Self" : {        "rel": "Self",        "href": "HTTP://RESTSERVERIP:PORT/STABLE/REST/DEPARTMENTS/10"      },      "Canonical" : {        "rel": "Canonical",        "href": "HTTP://RESTSERVERIP:PORT/STABLE/REST/DEPARTMENTS/10"      },      "Employees" : {        "rel": "Child",        "href": "Http://RESTServerIP:Port/stable/rest/Departments/10/Employees"      }    }  }, {    "DepartmentID": 20,    "Departmentname": "Retail Marketing",    "ManagerID":NULL,    "LocationID":NULL,    "Version": "Aced00057...contents truncated",    "Links" : {      "Self" : {        "rel": "Self",        "href": "HTTP://RESTSERVERIP:PORT/STABLE/REST/DEPARTMENTS/20"      },      "Canonical" : {        "rel": "Canonical",        "href": "HTTP://RESTSERVERIP:PORT/STABLE/REST/DEPARTMENTS/20"      },      "Employees" : {        "rel": "Child",        "href": "Http://RESTServerIP:Port/stable/rest/Departments/20/Employees"}}}, {... contents omitted}],"Links" : {    "Self" : {      "rel": "Self",      "href": "Http://RESTServerIP:Port/stable/rest/Departments"    }  },  "_contextinfo" : {    "Limit": 25,    "Offset": 0  }}

To get Departmentid,departmentname,locationid, and ManagerID show.

Add the JS code to the ViewModel:

　　

1. Define a single data model OJ. Model.extend ().

define ([' Ojs/ojcore ', ' knockout ', ' Ojs/ojmodel '],       function(OJ, KO) {functionViewModel () {varSelf = This; Self.serviceurl= ' http://RESTServerIP:Port/stable/rest/Departments ';//a JSON address 　　　　　　  //a callback function that parses a JSON data object when it is returned from the data service, forming a single data model. Parsedept =function(response) {if(response[' departments ']) {                   varInnerresponse = response[' departments '][0]; if(InnerResponse.links.Employees = =undefined) {                       varEmphref = ' '; } Else{emphref=InnerResponse.links.Employees.href; }                   return{departmentid:innerresponse[' DepartmentID '], departmentname:innerresponse[' Departmentname '], Links: {Employees: {rel:' Child ', Href:emphref}}}; }               return{departmentid:response[' DepartmentID '], departmentname:response[' Departmentname '], locationid:response[' LocationID '], managerid:response[' LocationID '], Links: {Employees: {rel:' Child ', href:response[' links ' [' Employees '].href}}};               }; varDepartment =OJ. Model.extend ({UrlRoot:self.serviceURL, parse:parsedept, Idattribu TE:' DepartmentID '               }); varMydept =NewDepartment ();           }; return{' DEPTVM ': ViewModel}; };}

Oj. Model.extend Method:

OJ. Model.extend ({   //   Optional   //  Parse: The callback function used to return the JSON data object from the data service.    ///  Parsesave: The user callback function model used to allow conversions is returned to the data service format that applies to the Save call.    //  urlRoot: The URL    used to collect data from the data Service})

2. Define the collection OJ for the single data model used above. Collection.entend ().

Limits a collection to 50 data.

define ([' Ojs/ojcore ', ' knockout ', ' Ojs/ojmodel '],    function(OJ, KO) {functionViewModel () {varSelf = This; Self.serviceurl= ' http://RESTServerIP:Port/stable/rest/Departments '; Self . Departments = Ko.observablearray ([]); Self. Deptcol = ko.observable (); Self.datasource = ko.observable (); varParsedept =function(response) {... contents omitted}; varDepartment =OJ. Model.extend ({UrlRoot:self.serviceURL, parse:parsedept, Idattribute:' DepartmentID '            }); varMydept =NewDepartment (); //use OJ. Model.extend () defines a model that forms a collection object, limiting 50 data                 var deptcollection = OJ. Collection.extend ({Url:self.serviceURL + "? limit=50", model:mydept }); Self. Deptcol (new  deptcollection ()); Self.datasource (new OJ. Collectiontabledatasource (self. Deptcol ()));  //OJ. Collectiontabledatasource conversion to the table data type to be used            }            return{' DEPTVM ': ViewModel}; });

3. Use OJ. Collection.fetch () fetching data from the server (getting the task from the server and further processing at completion)

define ([' Ojs/ojcore ', ' knockout ', ' Ojs/ojmodel '],         function(OJ, KO) {functionViewModel () {varSelf = This; Self.serviceurl= ' http://RESTServerIP:Port/stable/rest/Departments '; Self. Departments=Ko.observablearray ([]); Self. Deptcol=ko.observable (); Self.datasource=ko.observable (); Self.fetch = function(successcallback) {self. Deptcol (). Fetch ({success:successcallback, error:  function  (JQXHR, Textstatus, Errorthrown) {console.log (' Error in Fetch: ' +  textstatus); } }); }  varParsedept =function(response) {... contents omitted}; varDepartment =OJ. Model.extend ({UrlRoot:self.serviceURL, parse:parsedept, idattr Ibute:' DepartmentID '                }); varMydept =NewDepartment (); varDeptcollection =OJ. Collection.extend ({Url:self.serviceURL+ "? limit=50", model:mydept}); Self. Deptcol (Newdeptcollection ()); Self.datasource (NewOJ. Collectiontabledatasource (self.            Deptcol ())); }            return{' DEPTVM ': ViewModel}; });

Finish.

In addition: You can generally use var collection = new OJ. Collection (null, {url:xxxxxxx}) method gets JSON data

But from OJ. The data obtained by Collection cannot be used directly. Conversion is required to use.

Conversion method:

1. Use OJ. Knockoututils.map ()

This.datasource = OJ. Knockoututils.map (collection);

2. This.datasource = Collection.map (function (model) {

return model.attributes;

} );

3. Use a special API, such as OJ. Collectiondatagriddatasource

Oracle JET Model Data acquisition and use