Vivasoft-logo

Custom Elements and Compose View in Aurelia

Custom elements are useful when we have large page content and we need to break the pages into small pieces of components which can be reusable in the other pages also. To create a custom element we just need to create a view template and optionally a view model for it. Using a custom element to a page or another element is to just require it in that page and add a custom html tag for this.

Say we have a page that displays users information users personal info, his address and the blog posts which was posted by them. If we put all the information in a single component it will look like similar as below

<template>
  <div>
    Users Personal Information
  </div>
  <div>
    Users Contact Information
  </div>
  <div>
    Blog Posts
    <ul>
      <li>Post 1</li>
      <li>Post 2</li>
      <li>Post 3</li>
    </ul>
  </div>
</template>

 

Here its not a large amount of code but definitely it will be very large in real scenarios. There we can refactor this code and break these into 3 components like PersonalInfo, ContactInfo, UserBlogPost then it will look clean and easy to understand and it will be highly maintainable. Basically as a frontend developer you will deal with hundreds of components and composing them. It is conventional to put the reusable pieces of components in a separate folder called components/partials you can use whatever names you like. So I am creating these custom elements in components folder  as like below.

PersonalInfo.html

<template>
  <div>
    Users Personal Information
  </div>
</template>

ContactInfo.html

<template>
  <div>
    Users Contact Information
  </div>
</template>

UserBlogPost.html

<template>
  <div>
    Blog Posts
    <ul>
      <li>Post 1</li>
      <li>Post 2</li>
      <li>Post 3</li>
    </ul>
  </div>
</template>

Create 3 view models for each of these also PersonalInfo.js , ContactInfo.js and UserBlogPost.js.Make a class with the same file name (its optional though but its good to have a view model also). Now we will include them in our main user details page. I am using app.html file for these. See how our app.html look like

<template>
  <require from="./components/PersonalInfo"></require>
  <require from="./components/ContactInfo"></require>
  <require from="./components/UserBlogPost"></require>
  <personal-info></personal-info>
  <contact-info></contact-info>
  <user-blog-post></user-blog-post>
</template>

If you run it you will see the exact same result but our code now looks clean and we can easily reuse them into other pages also. Now see how we require and placed it in the template. we need to require it and specify its relative path don’t need to specify the extension. After requiring it we need to tell where to place it by html tag (hyphened version of the file name). That’s it you now know about custom elements.

Another way to use it by using <compose> attribute. Using compose attribute code will look like these for our app.html file

<template>
  <compose view-model="./components/PersonalInfo"></compose>
  <compose view-model="./components/ContactInfo"></compose>
  <compose view-model="./components/UserBlogPost"></compose>
</template>

Output will be the same. Compose is good when you want to render dynamic element based on some criteria. You can put a variable in the view-model attribute and change the path of the component from parent View Model. That is a difference between compose and custom element.

Now I will show you how you can pass a variable to the child component. Say we have user object with firstName and lastName in our app.js (Parent Component). We want to pass its value to the PersonalInfo component (Child Component). To make it work we need to declare a variable in  PersonalInfo.js and make it bindable properties. see how it do that

PersonalInfo.js

import { bindable } from "aurelia-framework";
export class PersonalInfo {
  @bindable user;
}

And In the child component view template we will display the firstName and lastName info.

PersonalInfo..html

<template>
  <div>
    ${user.firstName }
    ${user.lastName }
  </div>
</template>

Now to pass user object from parent model we need to add an attribute in the html tag for custom element. so the code will be

<template>
  <require from="./components/PersonalInfo"></require>
  <require from="./components/ContactInfo"></require>
  <require from="./components/UserBlogPost"></require>
  <personal-info user.bind="user"></personal-info>
  <contact-info></contact-info>
  <user-blog-post></user-blog-post>
</template>

See user.bind here user is the child component property name (it will be hyphened version of the name) and you have to specify which parent property it will pass as value. You can also bind a function like this way. To know more about custom elements go through their official docs .

Yml or Yaml for DevOps

As software engineers, we are always learning new tech stacks as we process our careers. Everyone who works on any short of software farm all came across a term called DevOps. As the name suggests, ...

Working with DocuSign, Authorization and Sending Document for Signature

DocuSign is a well known platform where users can send their document for signing via email or your app. I will try to show you how DocuSign authorize an user and how can we send a document to users ...

Worker Pool in Golang

Tags: #advance #topic #golang #goroutine #channels #workerpool #threadpool Often we end up with some work which is so time-consuming that if we’re able to assign, multiple person/worker, to do ...
java web application

Top 9 Practical Benefits Of Using Java Web Application

Java web application frameworks have one of the greatest and largest communities of software engineers in the world. Companies can build a team with the help of this community at ease. There are different communities to help beginners, intermediate as well as expert developers.

Read More