Class: RouterComponent

RouterComponent

Class representing a router component.
A router is reponsible of parsing the current browser location mapping its current hash to "pages". Each time the location is changed, the router tries to replace the inner HTML in a given html node id element.Pages are:
  1. A Component, which will render the page contents.
  2. Some other options, such as title.
You have to define your by calling RouterComponent#setRouterConfig.
Finally, calling start() will try to go to the page indicated by the hash, rendering its contents.
The RouterComponent is a ModelComponent because it has an own Model containing the "currentPage" property.

Constructor

new RouterComponent(rootHtmlId, modelRenderer, routeContentsHtmlId, model)

Creates a new router.
Parameters:
Name Type Description
rootHtmlId String The HTML element id where the router renders.
modelRenderer function the model renderer function
routeContentsHtmlId String The HTML element id where the different views of the router are placed
model Model The model
Source:
Example
var router = new RouterComponent(
     // id of the HTML element where router renders.
     'router',
     //HTML of the router.
     () => "<div id='router'><div id='maincontent'></div></div>",
     // id inside the router where the current page component renders.
     'maincontent');
router.setRouterConfig(
{
   login: { //rendered on http://<host>/<page>.html#login
     component: new LoginComponent(), // LoginComponent is a Component
     title: 'Login'
   },
   // more pages
   defaultRoute: 'login'
});
router.start();

Extends

Members

childComponentIds :Object.<string, Component>

The child components, arranged by their HTML element id.
Type:
Inherited From:
Source:

childComponents :Array.<Component>

The array of child components.
Type:
Inherited From:
Source:

childTags :Array.<String>

The optional name of custom element tags where child Components will be created dynamically.
During render, if in the HTML provided by the renderer function one of these tags is found, the createChildComponent() function is called.
Type:
  • Array.<String>
Inherited From:
Default Value:
  • empty array
Source:

eventListeners :Object.<string, {callback: function(), eventType: String}>

The event listeners that this Component is managing. See addEventListener().
Type:
  • Object.<string, {callback: function(), eventType: String}>
Inherited From:
Source:

htmlNodeId :String

The HTML element id where it renders into.
Type:
  • String
Inherited From:
Default Value:
  • null
Source:

stopped :Boolean

Whether this Component is stopped.
Stopped Components do not render.
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

Methods

addChildComponent(component)

Adds a child Component to this Component.

The HTML element where the child Component will render will not be re-rendered when this Component (the parent) is re-rendered.

The child component will be started (and thus immediately rendered) or stopped if this Component is currently started or stopped, respectively.

Parameters:
Name Type Description
component Component The child Component.
Inherited From:
Source:

addEventListener(eventType, nodesQuery, callback)

Adds an event listener to HTML element(s) inside this Component.
Listeners added to elements controlled by this Component should be added via this method, not directly to the HTML elements, because they can be removed during re-render. Listeners added with this method are always restored to the elements matching the selector query after rendering.
Parameters:
Name Type Description
eventType String The event type to be added to the elements.
nodesQuery String A HTML selector query to find elements to attach the listener to.
callback function The callback function to dispatch the event.
Inherited From:
Source:

addModel(modelName, model)

Adds a secondary model to this model component.

ModelComponents can have more than one model. The model passed in the constructor is the 'default' model. Additional models must have a name. When the modelRenderer function is called, the passed object to the function will contain the 'default' model itself and all the additional models under their respective names. For example, a code like:


var myModel = new Fronty.Model();
myModel.value = 'foo';
var mySecondaryModel = new Fronty.Model();
mySecondaryModel.value = 'bar';
var myModelComponent = new Fronty.ModelComponent(..., myModel, ...);
myModelComponent.addModel('secondary', mySecondaryModel);
will pass the following object to the model renderer function: 

{
   value: 'foo',
   secondary: {
       value: 'bar'
   }
}
Parameters:
Name Type Description
modelName String The name for the additional model
model Model The additonal model
Inherited From:
Source:

afterRender()

Hook function called by this Component after rendering. As a hook, it is intended to be overriden by subclasses.
Inherited From:
Source:

beforeRender()

Hook function called by this Component before rendering. As a hook, it is intended to be overriden by subclasses.
Inherited From:
Source:

createChildComponent(tagName, childTagElement, id) → {Component}

Overrides the child Component creation by also considering a "model" attribute in the tag.
The model attribute is used as a path inside the model object and calls ModelComponent#createChildModelComponent.
Parameters:
Name Type Description
tagName String The HTML tag name used to place the new child Component in the parent HTML
childTagElement Node The HTML element where the new Child will be placed
id String The HTML id found in the tag.
Inherited From:
Source:
See:
Returns:
The new created child Component.
Type
Component
Example
<!-- How to add a model attribute in the HTML child tag -->
<childcomponent id="child-0" model="items[0]">

createChildModelComponent(className, element, id, modelItem) → {Component}

This method searches for a class with the name of the className parameter with a constructor taking two attributes: id and model.
If you have components with different constructors or this policy does not adapt to your needs, you can override this method.
Parameters:
Name Type Description
className String The class name found in the element
element Node The HTML element where the new child will be placed
id String The HTML id found in the element.
modelItem Object a model object for the new Component.
Inherited From:
Source:
Returns:
The new created child component.
Type
Component

getChildComponent(id) → {Component}

Gets a child Component given its HTML element id.
Parameters:
Name Type Description
id String The HTML element id.
Inherited From:
Source:
Returns:
The child Component.
Type
Component

getChildComponents() → {Array.<Component>}

Gets the child Components of this Component.
Inherited From:
Source:
Returns:
The child Components.
Type
Array.<Component>

getChildComponentsById() → {Array.<String, Component>}

Gets the child Components arranged by id.
Inherited From:
Source:
Returns:
The child Components arranged by id.
Type
Array.<String, Component>

getCurrentPage() → {String}

Gets the current page being shown.
Source:
Returns:
The current page.
Type
String

getHtmlNodeId() → {String}

Gets the HTML element's id where this Component should render.

This element will be replaced with the contents of this component renderer function.

Inherited From:
Source:
Returns:
The HTML node id where this Component is rendered.
Type
String

getRouteQueryParam(name)

Gets a query parameter of the current route.
Note: route query parameters are NOT the standard URL query parameters, which are specified BEFORE the hash.
For example, if the current URL is 'index.html#login?q=1', a call to getRouteQueryParam('q') returns 1.
Parameters:
Name Type Description
name String The name of the route query parameter.
Source:
Returns:
The value of the router query parameter.

getRouterModel() → {Model}

Gets this the model of this router.
The router contains an internal model where the current page is stored (among those models provided in the constructor). You can obtain this internal model by calling this function.
Source:
Returns:
The model of this router.
Type
Model

goToPage(route)

Displays to an specified page. Pages are defined in RouterComponent#setRouterConfig
Parameters:
Name Type Description
route String The route to go. Example: 'login'
Source:

onStart()

Hook function called by this Component just after start. As a hook, it is intended to be overriden by subclasses.
Overrides:
Source:

onStop()

Hook function called by this Component just after stop. As a hook, it is intended to be overriden by subclasses.
Inherited From:
Source:

removeChildComponent(component)

Removes a child Component from this Component.

After the child removal, this component will re-render.

Parameters:
Name Type Description
component Component The child Component.
Inherited From:
Source:

render()

Render this Component, which consists in:
  1. Call the renderer function.
  2. Calculate the differences between the previous "virtual" DOM of this Component and the new "virtual" DOM provided by the renderer function, skipping those elements where child nodes are rendering.
  3. Patch the previous "virtual" DOM with the previously computed differences, and save it as the next previous "virtual" DOM.
  4. Patch the real DOM with the previously computed differences.
  5. Restore the child Components in their new places if they where moved to another part in the DOM.
  6. Create child nodes if new elements with tag name in Component#childTags or with fronty-component attribute are found in the HTML.
Inherited From:
Source:

setHtmlNodeId(htmlNodeId)

Sets the HTML element id where this Component should render in the next rendering.

The element will be replaced with the contents of this component renderer function.

Parameters:
Name Type Description
htmlNodeId String The HTML node id where this Component will be rendered.
Inherited From:
Source:

setModel(model)

Sets the model for this ModelComponent.

The component will be re-rendered

Parameters:
Name Type Description
model Model | Array.<Model> The model(s) to be set.
Inherited From:
Source:

setRouterConfig(routerConfig)

Sets the router configuration. This configuration basically maps URL hashes to Components that should be showed.
Parameters:
Name Type Description
routerConfig Object.<String, {component: Component, title: String}> Mapping of URL hashes to pages.
Source:
Example
router.setRouterConfig(
{
   login: { //rendered on http://<host>/<page>.html#login
     component: new LoginComponent(), // LoginComponent is a Component
     title: 'Login'
   },
   // more pages
   defaultRoute: 'login'
});

start()

Starts this Component and all of its children.
A Component need to be started in order to render. If this Component was stopped, it will render. Once this Component has been started and rendered, the onStart() hook is called.
Inherited From:
Source:

stop()

Stops this Component and all of its children.
Stopped Components do not render. Once this Component
Inherited From:
Source:

update(model)

This function overrides the ModelComponent#update, by also checking if the model being changed is this RouterComponent's model. In such a case, the RouterComponent goes to the page the model indicates.
Parameters:
Name Type Description
model Model The model that has been updated.
Overrides:
Source:

updateChildComponent()

Called when the parent ir rendered. This method does nothing. It is intended to be overriden
Inherited From:
Source:

Type Definitions

renderer() → {String}

The renderer function.
Inherited From:
Default Value:
  • null
Source:
Returns:
HTML content. It must return a single root element.
Type
String