Framework7 router component template literal

profile.html

<!-- new "es" attribute to treat it as template literal -->
<template es>
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="title">Profile</div>
      </div>
    </div>
    <div class="page-content">
      <!-- use conditional (ternary) operator instead of if/else -->
      ${this.user ? `
        <!-- Show user list when it is loaded -->
        <div class="list simple-list">
          <ul>
            <li>First Name: ${this.user.firstName}</li>
            <li>Last Name: ${this.user.lastName}</li>
            <li>Age: ${this.user.age}</li>
          </ul>
        </div>
        ` : `
        <!-- Otherwise show preloader -->
        <div class="block block-strong text-align-center">
          <div class="preloader"></div>
        </div>
        `
      }
    </div>
  </div>
</template>