标签:dmi attr service 映射 xtend div inner set mod
Oracle JET 应用程序数据可以来自生成 JSON 数据的任何 Web 数据源,例如 REST 服务,服务器发送事件(SSE)或 WebSocket 。此外,Oracle JET 还提供了基于 Oracle REST 标准集成 Web 服务数据的特定支持。
关于 Oracle JET Common Model 和 Collection API :
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
标签:dmi attr service 映射 xtend div inner set mod
原文地址:http://www.cnblogs.com/Easty/p/7219878.html