Oracle JET single page application router use (top)

Single page application: Use a page that is loaded once, and if the page changes due to user interaction, only the part of the page that changes is drawn.

To create a single-page application, you need to use OJ. Router is supported by virtual navigation, and Ojmodule is used to respond to page redraw. Ojmodule is used only for detached view and ViewMode, so that it is bound to the page through knockout. In addition, Ojmodule is optional and responds to changes directly on the element when the detached view and model are not used.

1. Simple model:

　　

When you select Chapter1 or other, the new content is displayed, and the URL changes to reflect the user's current position on the page.

　　

2. Router Adapter

The router has a two URL adapter. Each adapter defines how the URL is formatted for presentation.

Urlpathadapter: Formats the URL in the path segment. Each segment is the current status ID, separated by '/', such as: Localhost:8000/chap1

Urlparamadapter: Formats the URL using query parameters. Each parameter is the router name and its current status ID, such as: Localhost:8000/?root=chap1

The default adapter for the router is urlpathadapter. You need to change the methods you can use:

Oj. router.defaults[' urladapter ') = new OJ. Router.urlparamadapter

When you route a single-page application, the page does not load from the beginning, but the page content changes dynamically. To become part of the browser history and provide bookmark content, the Oracle JET router simulates the behavior of navigating using the HTML5 history push status feature. Routers also control URLs that look like traditional page URLs. These URLs do not have resources and you must set up an HTML server. This is done through a simple rule that overrides the engine.

In general, query parameters are used when the user requirements in an application contain only a few views and the associated state is not very complex. The path segment display URL appears to be more concise, especially with nested paths (add sub-routes).

Ojmodule and OJ. Router can be configured with Ojmodule objects, where the module name is the state of the router. When the router changes state, Ojmodule automatically loads and renders the contents of the current Routerstate object that are worth the specified module.

3. Examples of simple use:

(1) Appcontroller.js:

define ([' Ojs/ojcore ', ' knockout ', ' ojs/ojknockout ', ' ojs/ojrouter ', ' Ojs/ojbutton ', ' Ojs/ojtoolbar '],  function ( OJ, KO) {    function Controllerviewmodel () {      var self = this;      Self.router = OJ. router.rootinstance;      Self.router.configure ({        ' pref ': {label: ' Preface ', Isdefault:true},        ' Chap1 ': {label: ' Chapter 1 '},        ' Chap2 ': {label: ' Chapter 2 '},        ' Chap3 ': {label: ' Chapter 3 '}      });      Oj. router.defaults[' urladapter ') = new OJ. Router.urlparamadapter;    }    return new Controllerviewmodel ();  });

A) Add the Ojrouter module.

' Ojs/ojrouter '

b) Create a route instance, OJ. Router.rootinstance represents the only root route, and the name of the route is "root".

Self.router = OJ. Router.rootinstance;

c) Configure the router status, properties: Label: Link String, when no caption attribute is defined, the caption used for the page.

Value: The object associated with the state.

IsDefault: Setting the Start Page

Self.router.configure ({        ' pref ': {label: ' Preface ', Isdefault:true},        ' Chap1 ': {label: ' Chapter 1 '},        ' Chap2 ': {label: ' Chapter 2 '},        ' Chap3 ': {label: ' Chapter 3 '}      });

d) URL adapter, optional.

Oj. router.defaults[' urladapter ') = new OJ. Router.urlparamadapter;

(2) Main.js

Require ([' Ojs/ojcore ', ' knockout ', ' AppController ', ' ojs/ojknockout ', ' ojs/ojrouter ', ' Ojs/ojmodule '),   function  (OJ, KO, app) {     $ (function() {          OJ. Router.sync (). Then (          function() {            ko.applybindings (app, document.getElementById ( ' Routingcontainer ');          },          function(error) {            OJ. Logger.error (' Error in Root start: ' + error.message);   });});

A) Add Ojrouter modules and Ojmodule (added when Ojmodule is required)

' Ojs/ojrouter ', ' ojs/ojmodule '

b) Synchronize the router with the current URL. The router must be configured before it can be called to synchronize the URL with the router state.

Oj. Router.sync (). Then ()

c) Mount the AppController on the HTML

Ko.applybindings (App, document.getElementById (' Routingcontainer '))

(3) index.html

<div id= "Routing-container" > <div id= ' buttons-container ' data-bind= "ojcomponent: {component: ' OjToolbar '}" &        Gt <div data-bind= "ojcomponent: {component: ' Ojbuttonset ', checked:router.stateId, Focusmanagement: ' None '}"> <!--ko foreach:router.states-to <label data-bind=" attr: {for:id} "></label&gt            ; <input type= "Radio" Name= "chapter" data-bind= "Value:id, attr: {id:id},                                                                          Ojcomponent: {component: ' Ojbutton ', Label:label}"/> <!--/ko-</div> </div> <div data-bind=" OjModule:router.moduleCo Nfig "></div> </div>

A) trigger state transitions When selected

Defines the checked attribute to give Router.stateid observation values. It uses two-way binding. When a button is clicked, the ID is written to the Stateid, which causes the router state to transition.

b) Observe the status and update the relevant section

Data-bind= "OjModule:router.moduleConfig"

Use need to create the appropriate views and viewModels

　　　　

c) Router.states can get an array of routing configuration conversions for traversing the presentation

　　

(4) The actual effect is the same as the previous simple model.

4. Using sub-routes

(1) Appcontroller.js

define ([' Ojs/ojcore ', ' knockout ', ' ojs/ojknockout ', ' ojs/ojrouter ', ' Ojs/ojbutton ', ' ojs/ojtoolbar ', ' ojs/' Ojnavigationlist '],  function(OJ, KO) {functionControllerviewmodel () {varSelf = This; //creating a root routeSelf.shaperouter =OJ.      Router.rootinstance; Self.shapeRouter.configure ({' Square ': {label: ' Square ', IsDefault:true },        ' Circle ': {label: ' Circle ' },        ' Oval ': {label: ' Oval '}      }); //Create a sub-route configurationSelf.colorrouter = self.shapeRouter.createChildRouter (' Color '). Configure ({' Red ': {label: ' Red ', IsDefault:true },        ' Blue ': {label: ' Blue ' },        ' Green ': {label: ' Green '}      }); Self.menuitemselect=function(event, UI) {Self.shapeRouter.go (Ui.item.children (A). text ()); }    }    return NewControllerviewmodel (); });

A) Create a root route

b) Create a sub-route and configure

Use Createchildrouter (' name ') to create the sub-route and add the Configure configuration.

(Function (event, UI) The UI here is the content of jQueryUI. UI is the currently selected object, Ui.item gets the element of the object, here is UL)

(2) Main.js the same as the previous example

(3) index.html

<DivID= "Routing-container">  　　　  <!--Navigation bar Section -      <DivID= "Toolbar"Data-bind= "Ojcomponent: {component: ' Ojtoolbar '}"> 　　　　　 <!--Parent route navigation bar Section - 　         <DivData-bind= "Ojcomponent: {component: ' Ojbuttonset ', checked:shapeRouter.stateId, Focusmanagement: ' None '} ">          <!--ko foreach:shapeRouter.states -            <labelData-bind= "attr: {for:id}"></label>            <inputtype= "Radio"name= "Shape"Data-bind= "Value:id, attr: {id:id}, Ojcomponent: {component: ' Ojbutto n ', Label:label} "></input>          <!--/ko -        </Div> 　　　　　 <!--jump directly to the specified location -        <ButtonID= "Menubutton"Data-bind= "Ojcomponent: {component: ' Ojbutton ', Label: ' Go to ', menu : ' #gotoMenu '} ">        </Button> 　　　　　 <!--The list shows the jump position - 　         <ulID= "Gotomenu"style= "Display:none"Data-bind= "Ojcomponent: {component: ' Ojmenu ', Selec T:menuitemselect} ">          <!--ko foreach:shapeRouter.states -            <Li>              <aData-bind= "Text:label"></a>              <ulData-bind= "foreach: $root. colorrouter.states">                <Li>                  <aData-bind= "text: '/' + $parent. ID + '/' + ID"></a>                </Li>              </ul>            </Li>          <!--/ko -        </ul>              </Div>      <HR/> 　　　  <!--Show Section -      <DivID= "PageContent"class= "Oj-flex oj-flex-items-pad"> 　　　　  <!--Sub-route navigation bar -        <Divclass= "Oj-xl-2 oj-lg-2 oj-md-2 oj-sm-12 oj-flex-item">          <DivID= "Colors"Data-bind= "Ojcomponent: {component: ' Ojnavigationlist ', Selection:colorro Uter.stateid, Drillmode: ' None '} ">            <ulData-bind= "Foreach:colorRouter.states">              <LiData-bind= "attr: {id:id}">                <aData-bind= "Text:label"></a>              </Li>            </ul>          </Div>        </Div> 　　　　  <!--Graphic Display -        <Divclass= "oj-xl-10 oj-md-10 oj-sm-12 Oj-flex-item">          <DivData-bind= "css:shapeRouter.stateId (), style: {background:colorRouter.stateId ()}"></Div>        </Div>      </Div>    </Div>

A) Stateid can let knockout observe, and Steteid () can read the value of the current Id.

(4) CSS

. Square{width:100px;Height:100px; }. Circle{width:100px;Height:100px;-moz-border-radius:50px;-webkit-border-radius:50px;Border-radius:50px; }. Oval{width:200px;Height:100px;-moz-border-radius:100px/50px;-webkit-border-radius:100px/50px;Border-radius:100px/50px; }

(5) Effect display:

Oracle JET single page application router use (top)