Components

JSPA components are the fundemental building blocks. The most basic component could be a simple .ts file containing both the logic and display, but in practice it will make your life easier if you use .ts files and .html files to build each component.

Simpilest possible

/// <reference path="../../Application/component.ts" />

class MyComponent extends Component {

    constructor() {
        super();
    }

    draw(args: any): Promise<JQuery> {        
        return new Promise((resolve) => {
            let $html = $("<h1>My Component</h1>");
            resolve($html);
        });
    };
}

Explained

/// <reference path="../../Application/component.ts" />

Our new componet is an extension of the base class Component, and as such is dependent upon that class, and the file its decalred in. Therfore we have to ensure that all of our component declarations include this line. https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

class MyComponent extends Component

This allows our new component to access all the logic of the base Componet class. This is required so the framework "knows" what our new class is, and how to deal with it. The base Componet class also places some requirements on its derived classes.

constructor() {
        super();
    }

When you create an instance of this class - call the constructor on the parent Component class. In more complex example this allows us to do things such as wire up template .html files, and pass in the parent

draw(args: any): Promise<JQuery> {        
        return new Promise((resolve) => {
            let $html = $("<h1>My Component</h1>");
            resolve($html);
        });
    };

The draw method is compulsary, all components must include this as its the entry point for the Routing.

• args: any You can pass any data you like to the draw() method, but the routing component will use this variable to pass data from the url. The args are a javascript object.
• : Promise<JQuery> JSPA uses Promises a lot. The draw() method should return a Promise of a JQuery object. JSPA uses JQuery objects a lot. When the Promise from a draw() method resolves the JQuery should hold what ever UI elements you want to be renderd. The Routing component will by default replace the entire application view with what ever is returned. (NB: This isn't 100% true, as you can esily configure the index.html and config.ts files to only replace part of the application view).

With a template .html file

As mentioned previously components only NEED a .ts file, however to seperate display and logic you probably want to include template.html files.

To keep things organised its probably a good idea to create a seperate directory for each component, underneath the Components directory. In here you can keep all the .ts and .html files required for that component together.

The framework also uses a naming convention, compoents are all lowercase with words seperated by -. Classes however are CamelCase with no hyphen. You can follow this if you want.

Components

my-component

my-component.ts my-component.html

In order to include the my-componet.html file the component becomes

/// <reference path="../../Application/component.ts" />

class MyComponent extends Component {

    constructor() {
        super({ url: "Components/my-component/my-component.html", name: "content"});
    }

    draw(args: any): Promise<JQuery> {        
        return new Promise((resolve) => {
            let $html = this.getTemplate("content");
            resolve($html);
        });
    };
}

There are only 2 differnces, we have passed a path to the .html file into the super() call, and used the .getTemplate() method of the Component class to read it in.

There are a number of ways references to template.html files can be passed to the super() call, but all paths are relative to the route of the application, the index.html file.

// unnamed - will be named "content" so can be identified later
super("Components/my-component/my-component.html");

// with a name, can be named anything you want
super({ url: "Components/my-component/my-component.html", name: "content"});

// as an array - so you can reference multiple templates
super([
    { url: "Components/my-component/my-component.html", name: "main"},
    { url: "Components/my-component/sub-template.html", name: "child"}
    ]);

The this.getTemplate() call does more than just pull in HTML. It also binds data to the UI and binds the Component $view attribute to the resulting JQuery object for access later. But thats getting out of the realms of Quick Start, head over to Data Binding for more info.