Oracle JET Model 数据获取与使用
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
Oracle JET Model 数据获取与使用的更多相关文章
- Oracle JET 起步
Oracle JET介绍 Oracle JET是一个用于经验丰富的JavaScript开发人员构建客户端的基于JavaScript的应用程序的工具包.(抱歉本人对JavaScript绝对是从零开始) ...
- Oracle JET(一)Oracle JET介绍
Oracle JET (Oracle Javascript Extension Toolkit)是一款 Oracle 的 JavaScript 拓展工具包.简单来说 Oracle JET 是一个一堆好 ...
- Oracle JET mobile cordove navigator.app对象
在使用 Oracle JET 开发 webapp 时,会使用到 ojrouter ,ojrouter 默认含有历史记录推送功能.在调试 Android 时会发现返回键总是返回到上一次浏览记录(App ...
- Oracle JET mobile 入门使用
Oracle JET 框架能开发 window, Android, ios 的 WebApp .主要使用 Codova 来进行开发. 简单使用 Oracle JET 开发 Android webapp ...
- Oracle JET Router 与 Module 数据传递
Oracle JET 组件间数据传递方法. 路由:父路由:customers Router 子路由: cust Router 这里 Router 和 module 结合使用. customer 包括 ...
- Oracle JET 单页面应用程序Router 使用(上)
单页面应用程序:使用一个进加载一次的网页,如果页面由于用户的交互而改变,则仅绘制更改的页面部分. 要创建单页面应用程序需要使用 oj.Router 的虚拟导航来支持,ojModule 用来响应页面的重 ...
- Oracle JET 使用RequireJS第三方工具或库引入
在 Oracle JET 应用程序中使用 RequireJS 添加第三方工具或库. 步骤: 1.如果使用工具框架脚手架,需要一下操作. a.使用 npm 安装你需要的库. npm install my ...
- Oracle JET(三)Oracle JET 响应布局
Oracle JET 提供了一系列的 CSS 样式以直接使用. Oracle JET CSS样式链接:http://docs.oracle.com/middleware/jet310/jet/refe ...
- Oracle JET(二)Oracle JET使用
Oracle JET 开发分为 Web 应用程序开发和移动应用程序开发(WebApp). Oracle JET Web 应用程序开发入门: 使用方法三种: 使用 Oracle JET Yeoman 生 ...
随机推荐
- 04、DAT图像文件
DAT是芯片的原始扫描图像,如下图: 注:这两张图来自<Bayesian Inference for Gene Expression and Proteomics>.A是U95Av2芯片的 ...
- 解决Response.AddHeader中文乱码问题
string filename = HttpUtility.UrlEncode(Encoding.UTF8.GetBytes("培训班自然情况表")); Response.AddH ...
- jqery实现10X10的表格,双击消失
<script type="text/javascript"> $(document).ready(function(){ //循环拼接html s="&qu ...
- git常用命令之log
查看提交日志记录 基础命令: git log commit ca82a6dff817ec66f44342007202690a93763949 Author: Scott Chacon < ...
- leetcode34. 在排序数组中查找元素的第一个和最后一个位置
给定一个按照升序排列的整数数组 nums,和一个目标值 target.找出给定目标值在数组中的开始位置和结束位置. 你的算法时间复杂度必须是 O(log n) 级别. 如果数组中不存在目标值,返回 [ ...
- zabbix 数据库问题
Too many connections ::052844.247 Cannot connect to the database. Exiting... :: started [trapper #] ...
- Codeforces1238F. The Maximum Subtree(树形dp)
题目链接:传送门 思路: 题意说用线段的相交作为边,来构造树,所以不存在大于等于3个的线段两两相交,否则会构成环.因而构造出的树中,每个点最多只会与2个度大于1的节点相邻. 不妨把1设为树根,用deg ...
- php字符串大小写转换
strtoupper().strtolower().ucfirst().ucfirst().ucwords().mb_strtoupper().mb_strtolower()和mb_convert_c ...
- Linux 系统分类
linux系统,主要分debian系和redhat系,还有其它自由的发布版本. 1.debian系主要有Debian,Ubuntu,Mint等及其衍生版本: 2.redhat系主要有RedHat,Fe ...
- 问题:关于2.3 jmu-Java-02基本语法-03-身份证排序 (9 分)
输出未能排序 import java.util.Scanner; import java.util.Arrays; public class Main { pu ...