Oracle JET 组件间数据传递方法。

  路由:父路由:customers Router  子路由: cust Router

  这里 Router 和 module 结合使用。

    customer 包括 customers.js 和 customers.html

    cust 包括 cust.js 和 cust.html

  在 customers 中 cust 以 ojModule 显示。

  1. cust.js 中获取父路由方法:

define(['ojs/ojcore', 'knockout', 'jquery'], function (oj, ko, $) {
function cust(params) {
var parentRouter = params.ojRouter.parentRouter;
      self.custRouter = parentRouter.createChildRouter('cust');
}
return cust;
})

  这里 params 不需要在父路由中传入东西即可使用 params 。使用 params.ojRouter.parentRouter 。即可获取父路由。

  使用 parentRouter.createChildRouter('cust') 则可以创建子路由。

  注意要使用 return cust ,不能 return new cust()

  2. 父子组件通信。

  1) customers.js

define(['ojs/ojcore', 'knockout', 'jquery'], function (oj, ko, $) {
function customers() {
this.text = ko.observable('123');
this.customersRouter = oj.Router.rootInstance;
this.customersRouter.configure({
'cust' : {label: 'cust'},
......
})
this.moduleConfig = ko.pureComputed(function() {
return $.extend(true, {}, this.customersRouter.moduleConfig, {
'params': { 'data': 'test','text': this.text}
})
})
}
return customers;
})

  2) customers.html

  在插入 ojModule 上的地方写上 ojModule: moduleConfig

  3) cust.js

define(['ojs/ojcore', 'knockout', 'jquery'], function (oj, ko, $) {
function cust(params) {
var data = params.data;
var text = params.text;
text('456')
}
return cust;
})

  子组件直接使用 params.data 就可以直接获取父组件传入的数据。

  响应地,子组件更改内容 text('456'),也会反映到父组件之中。

  

  3.在使用 Router 和多层嵌套 module 时需要注意,在 main.js 的 requirejs.config 中需要设置基本的 url ,否则多层嵌套的 module 不会执行。因为 module 路径会默认当前的 url。

    如 module 在 http://XXX/ 下默认寻找 views 和 viewModels 在 js 目录下,可寻找成功。

    若使用路由 url 变为 http://XXX/customers ,则会变成在 customers/js 目录下寻找 views 和 viewModels 。这样会使寻找文件失败,无法显示 module。

    所以,在 main.js 下设置好 baseURL,默认为 baseURL: '/js'  更改为

    baseUrl: window.location.href.split('#')[0].substring(0, window.location.href.split('#')[0].lastIndexOf('/')) + '/js'

    

Oracle JET Router 与 Module 数据传递的更多相关文章

  1. sqoop实现关系型数据库与hadoop之间的数据传递-import篇

    由于业务数据量日益增长,计算量非常庞大,传统的数仓已经无法满足计算需求了,所以现在基本上都是将数据放到hadoop平台去实现逻辑计算,那么就涉及到如何将oracle数仓的数据迁移到hadoop平台的问 ...

  2. Vue之单文件组件的数据传递,axios请求数据及路由router

    1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...

  3. vue教程3-05 vue组件数据传递、父子组件数据获取,slot,router路由

    vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...

  4. Oracle JET 单页面应用程序Router 使用(上)

    单页面应用程序:使用一个进加载一次的网页,如果页面由于用户的交互而改变,则仅绘制更改的页面部分. 要创建单页面应用程序需要使用 oj.Router 的虚拟导航来支持,ojModule 用来响应页面的重 ...

  5. Oracle JET(一)Oracle JET介绍

    Oracle JET (Oracle Javascript Extension Toolkit)是一款 Oracle 的 JavaScript 拓展工具包.简单来说 Oracle JET 是一个一堆好 ...

  6. 无废话Android之smartimageview使用、android多线程下载、显式意图激活另外一个activity,检查网络是否可用定位到网络的位置、隐式意图激活另外一个activity、隐式意图的配置,自定义隐式意图、在不同activity之间数据传递(5)

    1.smartimageview使用 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&q ...

  7. [转]Angular2-组件间数据传递的两种方式

    本文转自:https://www.cnblogs.com/longhx/p/6960288.html Angular2组件间数据传递有多种方式,其中最常用的有两种,一种是配置元数据(或者标签装饰),一 ...

  8. Angular2-组件间数据传递的两种方式

    Angular2组件间数据传递有多种方式,其中最常用的有两种,一种是配置元数据(或者标签装饰),一种是用单例模块传递:有两个元数据具有传递数据的功能:inputs和outputs. 一.元数据传递 1 ...

  9. SpringMVC -- 梗概--源码--壹--数据传递

    附:实体类 Class : User package com.c61.entity; import java.text.SimpleDateFormat; import java.util.Date; ...

随机推荐

  1. P1399 [NOI2013]快餐店

    传送门 基环树的题当然先考虑树上怎么搞,直接求个直径就完事了 现在多了个环,先把非环上的直径(设为 $ans$)和环上节点 $x$ 到叶子的最大距离(设为 $dis[x]$)求出来 考虑到对于某种最优 ...

  2. Elasticsearch入门教程(一):Elasticsearch及插件安装

    原文:Elasticsearch入门教程(一):Elasticsearch及插件安装 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:h ...

  3. npm学习(七)之如何发布包、更新发布包、删除发布包

    前言 我们经常使用npm来下载别人的模块或者说包,那么我们如何将自己写的模块上传到npm呢? 了解npm政策 在开始之前,最好回顾一下npm的政策,以防您对站点礼仪.命名.许可或其他指导原则有疑问. ...

  4. 大数据计算引擎之Flink Flink状态管理和容错

    这里将介绍Flink对有状态计算的支持,其中包括状态计算和无状态计算的区别,以及在Flink中支持的不同状态类型,分别有 Keyed State 和 Operator State .另外针对状态数据的 ...

  5. MySQL on duplicate key update 批量插入并更新已存在数据

    业务上经常存在一种现象,需要批量往表中插入多条数据,但在执行过程中,很可能因为唯一键冲突,而导致批量插入失败.因此需要事先判断哪些数据是重复的,哪些是新增的.比较常用的处理方法就是找出已存在的数据,并 ...

  6. Echarts-样式简介

    本文介绍这几种方式,他们的功能范畴可能会有交叉(即同一种细节的效果可能可以用不同的方式实现),但是他们各有各的场景偏好. 颜色主题(Theme) 调色盘 直接样式设置(itemStyle.lineSt ...

  7. IDEA debug模式鼠标悬停提示变量值

  8. 关闭mmu和cache

    处理器内部寄存器,访问速度最快,但是数量少 TCM:紧耦合存储器(Cache.主存储器) 辅助存储器(Flash.SD等) Cache是一种容量小但是存取速度非常快的存储器 它保存最近用到的存储器中的 ...

  9. 002-Saltstack自动化操作记录(2)-配置使用

    之前梳理了就是第一篇001,下面说说saltstack配置及模块使用: 为了试验效果,再追加一台被控制端minion机器192.168.1.118需要在master控制端机器上做好主机名映射关系 1 ...

  10. Codeforces 899 1-N两非空集合最小差 末尾最多9对数计算 pair/链表加优先队列最少次数清空

    A /*Huyyt*/ #include<bits/stdc++.h> #define mem(a,b) memset(a,b,sizeof(a)) #define pb push_bac ...