Oracle JET Model 数据获取与使用

Posted 2020-09-29 Easty

　　Oracle JET 应用程序数据可以来自生成 JSON 数据的任何 Web 数据源，例如 REST 服务，服务器发送事件（SSE）或 WebSocket 。此外，Oracle JET 还提供了基于 Oracle REST 标准集成 Web 服务数据的特定支持。

　　关于 Oracle JET Common Model 和 Collection API ：

• oj.Model：表示 REST 服务器等数据服务中的单个记录。（获取JSON数据设定单个数据模型）
• oj.Collection：表示一组数据记录，是 oj.Model 相同类型对象的列表。（将单个数据模型收集或直接使用JSON数据模型）
• oj.Events：提供事件处理的方法。
• oj.KnockoutUtils：提供用于将属性 oj.Model 或 oj.Collection 对象映射到用于组件 ViewModels 的 Knockout 可观察器的方法。（将收集到的数据转化成可以在knockout使用的数据）

　　oj.Model 和 oj.Collection 包括客户端 API，它提供了一种将外部数据引入 Oracle JET 应用程序的方式。

　　oj.KnockoutUtils 提供了 map() 将模型对象中的属性或集合对象中的所有模型的属性映射到应用程序的视图数据模型的方法。

　　案例讲解：

　　一个 JSON 数据

{
  "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
  }
}

 　　要获得 DepartmentId，DepartmentName，LocationId，和ManagerId展示。

　　在viewmodel中添加JS代码：

　　

　　1.定义单个数据模型 oj.Model.extend() 。

define([‘ojs/ojcore‘, ‘knockout‘, ‘ojs/ojmodel‘],
       function(oj, ko)
       {
           function viewModel() {
               var self = this;
               self.serviceURL = ‘http://RESTServerIP:Port/stable/rest/Departments‘;  // 一个JSON地址

　　　　　　 // 回调函数，用于在从数据服务返回时对JSON数据对象进行解析，形成单个数据模型。
           parseDept = function(response) {
               if (response[‘Departments‘]) {
                   var innerResponse = response[‘Departments‘][0];
                   if (innerResponse.links.Employees == undefined) {
                       var empHref = ‘‘;
                   } 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}}};
           };
               var Department = oj.Model.extend({
                   urlRoot: self.serviceURL,
                   parse: parseDept,
                   idAttribute: ‘DepartmentId‘
               });
    
               var myDept = new Department();
           };

           return {‘deptVM‘: viewModel};
       };
}

　　oj.Model.extend方法：

oj.Model.extend({
   // 可选
   // parse : 用于从数据服务中返回JSON数据对象的回调函数。
   // parseSave： 用于允许转换的用户回调函数模型返回到适用于保存调用的数据服务格式。
   // urlRoot：用于从数据服务中收集数据的URL    
})

 　　

　　2.定义上述使用的单个数据模型的集合 oj.Collection.entend() 。

　　将集合限制为50个数据。

define([‘ojs/ojcore‘, ‘knockout‘, ‘ojs/ojmodel‘],
    function(oj, ko){
        function viewModel() {
            var self = this;
            self.serviceURL = ‘http://RESTServerIP:Port/stable/rest/Departments‘;
            self.Departments = ko.observableArray([]);
            self.DeptCol = ko.observable();
            self.datasource = ko.observable();

            var parseDept = function(response) {
            ... contents omitted
            };

            var Department = oj.Model.extend({
                urlRoot: self.serviceURL,
                parse: parseDept,
                idAttribute: ‘DepartmentId‘
            });

            var myDept = new Department();

            // 使用oj.Model.extend()定义的模型形成集合对象，限制50个数据
                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 转换成需要使用的table数据类型

            }
            return {‘deptVM‘: viewModel};
        }
);

 

 　　

　　3.使用oj.Collection.fetch()从服务器端获取数据（从服务器获取任务，并在完成时进一步处理）

define([‘ojs/ojcore‘, ‘knockout‘, ‘ojs/ojmodel‘],
         function(oj, ko){
            function viewModel() {
                var self = 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);
                        }
                    });
                }

                var parseDept = function(response) {
                   ... contents omitted
                };

                var Department = oj.Model.extend({
                    urlRoot: self.serviceURL,
                    parse: parseDept,
                    idAttribute: ‘DepartmentId‘
                });

                var myDept = new Department();

                var DeptCollection = oj.Collection.extend({
                    url: self.serviceURL + "?limit=50",
                    model: myDept
                });

                self.DeptCol(new DeptCollection());
                self.datasource(new oj.CollectionTableDataSource(self.DeptCol()));

            }
            return {‘deptVM‘: viewModel};
        }
);

 

　　完。

 

　　另外： 一般可以使用  var collection = new oj.Collection( null, { url: XXXXXXX }) 方法获取JSON数据

　　但从 oj.Collection 获取的数据不能直接使用。需要转换才能使用。

　　转换方法： 

　　1.使用 oj.KnockoutUtils.map()

　　　　this.datasource = oj.KnockoutUtils.map(collection);

　　2.    this.datasource = collection.map( function( model ) {

　　　　　　　return model.attributes;

　　　　} );

　　3. 使用特别的API，如 oj.CollectionDataGridDataSource