oracleJet-子路由

book.html

<div id="chapter" class="oj-flex oj-flex-items-pad">
   <div class="oj-xl-2 oj-lg-2 oj-md-2 oj-sm-12 oj-flex-item">
      <div id="menu" data-bind="ojComponent:{ component: 'ojNavigationList',
                                              selection: router.stateId,
                                              drillMode: 'none' }">
         <ul data-bind="foreach: router.states">
            <li data-bind="attr: {id: id}">
               <a data-bind="text: label"></a>
            </li>
         </ul>
      </div>
   </div>
    <div  class="oj-panel oj-margin oj-flex-item"
          data-bind="ojModule:router.moduleConfig">
    </div>
</div>

book.js

define([
   'ojs/ojcore',
   'knockout',
   'jquery',
   'ojs/ojknockout', 'ojs/ojrouter', 'ojs/ojnavigationlist', 'ojs/ojinputtext', 'ojs/ojdialog'
], function(oj, ko, $) {
        router = oj.Router.rootInstance;    //创建路由
        childRouter = router.createChildRouter('chapter', 'book')  //根据路由Book创建子路由chapter
               .configure({
                  'preface': {   //preface是页面以及JS文件的名字
                     label: 'page 1'
                  },
                  'chapter1': {
                     label: 'page 2'
                  }
               });
      /**
       * The view model for the book page.
       */
         var viewModel = {  
            router: childRouter
         };
   return viewModel;
});