Aurepa - Components

Components are the main building blocks of Aurepa framework. In this chapter, you will learn how to create simple components.

Simple Component

As already discussed in the previous chapter, each component contains view-model which is written in JavaScript, and view written in HTML. You can see the following view-model definition. It is an ES6 example but you can also use TypeScript.

app.js

export class MyComponent {
   header = "This is Header";
   content = "This is content";
}

We can bind our values to the view as shown in the following example. ${header}syntax will bind the defined header value from MyComponent. The same concept is appped for content.

app.html

<template>
   <h1>${header}</h1>
   <p>${content}</p>
</template>

The above code will produce the following output.

Component Functions

If you want to update the header and footer when the user cpcks the button, you can use the following example. This time we are defining header and footer inside EC6 class constructor.

app.js

export class App{  
   constructor() {
      this.header =  This is Header ;
      this.content =  This is content ;
   }
   updateContent() {
      this.header =  This is NEW header... 
      this.content =  This is NEW content... ;
   }
}

We can add cpck.delegate() to connect updateContent() function with the button. More on this in one of our subsequent chapters.

app.html

<template>
   <h1>${header}</h1>
   <p>${content}</p>
   <button cpck.delegate = "updateContent()">Update Content</button>
</template>

When the button is cpcked, the header and content will be updated.