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. linux查看网络ip得两个命令ifconfig和 ip addr

    在安装linux 得时候,我们要选择桥接网络,相当于本电脑和虚拟机得电话都是接通外网,linux查看网络ip得两个命令ifconfig和 ip addr 1,命令ifconfig 如果ifconfig ...

  2. filebeat->redis->logstash->elasticsearch->kibana

    整体流程 filebeat收集openresty应用日志传输到Redis集群中 Logstash从Redis集群中拉取数据,并传输到Elasticsearch集群 使用Kibana可视化索引 使用El ...

  3. 学习WCF之路,长期更新

    我学习WCF之路:创建一个简单的WCF程序   为了使读者对基于WCF的编程模型有一个直观的映像,我将带领读者一步一步地创建一个完整的WCF应用.本应用功能虽然简单,但它涵盖了一个完整WCF应用的基本 ...

  4. npm学习(六)之如何创建 Node.js 模块

    如何创建 Node.js 模块 Node.js 模块是一种可以发布到 npm 的包.当你创建一个新模块时,创建 package.json 文件是第一步. 你可以使用 npm init 命令创建 pac ...

  5. 真香系列之 Golang 升级

    Golang 以前的依赖管理一直饱受诟病,社区的方案也层出不穷,比如 vendor, glide, godep 等.之前的依赖管理一直是依靠 GOPATH 或者将依赖代码下载到本地,这种方式都有劣势. ...

  6. php框架之laravel

    常见问题: 1. 访问网站500错误 这是因为laravel的缓存路径没有找到 laravel缓存文件路径是在 config/cache.php中设置,默认存在storage文件夹中 解决:需要保证s ...

  7. css不同情况下的各种居中方法

    div水平居中 1.行内元素 .parent{ text-align: center } 2.块级元素 .son{ margin: 0 auto ; } 3.flex布局 .parent{ displ ...

  8. maven参数详解

    setting.xml主要用于配置maven的运行环境等一系列通用的属性,是全局级别的配置文件:而pom.xml主要描述了项目的maven坐标,依赖关系,开发者需要遵循的规则,缺陷管理系统,组织和li ...

  9. github readme 添加图片预览

    ![img](https://github.com/lanshengzhong/mina_alan/blob/master/screenshot/2.gif) ![图片加载失败的时候就会显示这段话]( ...

  10. java<T>泛型

    泛型 1.泛型的概述 在JDK1.5之前,把对象放入到集合中,集合不会记住元素的类型,取出时,全都变成Object类型.泛型是jdk5引入的类型机制,就是将类型参数化,它是早在1999年就制定的jsr ...