Oracle JET Router 与 Module 数据传递

　　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 数据传递

最新文章

热门文章