Home

Monkey JS

Define namespaces for implementation of simple components. This project is ideal create a simple javascript framework for building applications.

Create component

You must first create your operating html of your component. Do the mapping of all the tags you will need. Example:

<div data-component="my-example-color"></div>

The name defined in data-component="my-example-color" is the name of the constructor function. The naming rule in the component creation in the marking is the spinal-case.

Create attributes

You can add attributes to your component using the data-name="value" in the main element of the own component. example:

<div data-component="my-example-color" data-color="blue"></div>

The created attribute is automatically incorporated into your component. Using pattern write of spinal-case.

Create elements

To add elements to your component you must use the data-element="my-element". The name of the element should serguir spinal-case standard. Follow the example:

<div data-component="my-example-color" data-color="blue">
    <p data-element="main-text">My first component.</p>
</div>

main-text will be a jQuery object that can be accessed within your component through the this.elements getting that way this.elements.mainText.

Add Events

You can add events in your component. In your html add data-action="my-event", is simple. Later we'll see as to create a function for this event

<div data-component="my-example-color" data-color="blue">
    <p data-element="main-text">My first component.</p>
    <button type="button" data-action="change-color">Change Color Right Now</button>
</div>