Oracle JET Model Data acquisition and use

Source: Internet
Author: User
Tags ojs truncated

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.