Class: ModelComponent

ModelComponent

Class representing a model-based Component.
A ModelComponent is a Component which auto-renders itself when a given model object changes. This model object is also passed to this Component's renderer function each time this Component is rendered.

Constructor

new ModelComponent(modelRenderer, model, htmlNodeId, childTagsopt)

Creates a new ModelComponent.
Parameters:
Name Type Attributes Description
modelRenderer function A renderer function which accepts a Model as argument.
model Model The default model. You can add more models with ModelComponent#addModel.
htmlNodeId String The id of the HTML element where this Component should render to.
childTags Array.<String> <optional>
 An optional Array of strings of custom-tags for dynamically created child Components.
Source:
Examples
<!-- html page -->
<body>
 <div id="mycomponent"></div>
</body>
// Javascript
// Model
var model = new Model();
model.counter = 0;

// The ModelComponent to render the Model
var component = new ModelComponent(
 (m) => '<div>Counter: <span>'+m.counter+'</span></div>', // renderer function
 model, //the model
 'mycomponent' // HTML element id
 );

component.start(); // first render

// Make changes in Model to fire re-renders
setInterval(() => {
   model.set( () => model.counter++); // model update -> automatic re-render!
}, 1000);

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
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.
Overrides:
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.
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>

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

onStart()

Hook function called by this Component just after start. As a hook, it is intended to be overriden by subclasses.
Inherited From:
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.
Source:

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.
Overrides:
Source:

stop()

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

update(model)

The observer function added to all models this ModelComponent manages.
This function simply calls render, but you can override it.
Parameters:
Name Type Description
model Model The model that has been updated.
Source:

updateChildComponent()

Called when the parent ir rendered. This method does nothing. It is intended to be overriden
Overrides:
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