Decorators - jasperjs/jasper-application GitHub Wiki

• Overview
• Configuration
• Controller

Decorator components (decorators) - is a part of application, that allows your to extend existing HTML elements or components. Decorators does not have a template, like components.

Decorators uses as attributes to existing elements and represents in project as class. Instance of the class create on each deorator usage.

To create decorator type:

yo jasper:decorator <AREANAME> <ATTRIBUTE-NAME>

For instance

yo jasper:decorator main focus-on-default

After that Yeoman creates a decorator folder. This folder contains:

1. _definition.json - stores configuration of the decorator;
2. DecoratorName.ts - decorator controller.

When you have done - type grunt to build the app.

Example:

{
  "type": "decorator",
  "ctrl": "spa.core.decorators.SelectOnFocus",
  "properties": "",
  "events": "selected"

  /* other properties */

}

Configuration may have following properties:

For decorators it's allways 'decorator'

Specifies the decorator controller.

Specifies that this decorator require another component or decorator (almost AngularJS 'require' property). Required components will passed to the controller's 'link' function.

Default: true

Legacy api. Please use properties instead.

Specifies need to eval expression, passed to the decorator attribute. Result of the expression will passed to the 'link' function as 'value' parameter.

Properties for decorators works same as for components. Please see Components documentation.

Events for decorators works same as for components. Please see Components documentation.

Decorator controller is a class. It may have the following public methods:

Jasper invokes this method when decorator links with HTML element in which his applied.

module spa.core.decorators {
    // somple decorator, which place focus to the applied element
    export class FocusOnDefault {
        // inject services here
        static $inject = [];

        link(value: any, element: HTMLElement, attrs: any, requiredComponents: any) {
            if (element.tagName === "INPUT" || element.tagName === "TEXTAREA") {
                (<HTMLInputElement>element).focus();
            } 
        }

        destroyComponent(){
            //cleanup code here
        }

    }
}

Jasper invokes this method whem HTML element, associated with decorator, removes from DOM. Place here any cleanup code.

Jasper invokes this method when value passed to decorator element attribute has changed.

When your decorator is done you can use it in your templates, like:

<input type="text" focus-on-default />