Partials

Table of Contents

Partials are building blocks for your templates. They give you can opportunity to extract some markup to its own file and include it at runtime.

Partials shares the scope of the parent template. For isolated scope, you must use Components.

Basic Example

User Profile
<h2> {{ user.username }} </h2>
<p> {{ user.bio }} </p>
Template File
@each(user in users)
  <div class="user">
    @include('user-profile')
  </div>
@endeach
Data Object
const users = [
  {
    username: 'virk',
    bio: 'Some fancy bio'
  },
  {
    username: 'joe',
    bio: 'Some fancy bio'
  }
]
Output
<div class="user">
  <h2> virk </h2>
  <p> Some fancy bio </p>
</div>

<div class="user">
  <h2> joe </h2>
  <p> Some fancy bio </p>
</div>

Each Include

Also, you can pass the 2nd argument to the @each tag to include a partial for each iteration.

@!each(user in users, include = 'user-profile')