Templates

Templates

Helpers are required to define a HTML template which is used to render them in the app screen.

Templates support the following features:

Binding to variables
Blocks for conditional visibility
Loops and iterators for arrays

Take a look at a basic example where a helper is defining a custom template:

Fliplet.Helper({
  name: 'welcome',
  render: {
    template: '<p>Hi {! firstName !}, how are you?</p>'
  },
  data: {
    firstName: 'John'
  }
});

<fl-helper name="welcome"></fl-helper>

Binding to variables

Variables can also be defined via HTML field nodes and can be accessed using the fields property, e.g. use the {! fields.name !} syntax to define dynamic binding to variables from your HTML templates:

<fl-helper name="user">
  <field name="name">John</field>
</fl-helper>

Fliplet.Helper({
  name: 'welcome',
  render: {
    template: '<p>Hi {! fields.name !}, how are you?</p>'
  }
});

Note: The paths are passed to _.get(object, path) (ref) which supports [ ] notations for paths that contain spaces or [ ] characters.

Use [ ] to wrap around keys that include a space, e.g. [First name]
"" within [ ] is supported but optional in some cases, e.g. [First name] and ["First name"] are both supported
When referencing nested properties, . before [ ] is supported but optional, data[First name] and data.[First name] are both supported
If the key includes [ ] characters, use "" within [ ] are required, e.g. ["Location [accuracy]"]
You can choose to always include [] and "", e.g. ["Name"], ["First name"], ["Location [accuracy]"]

Blocks for conditional visibility

If you require parts of your HTML to be conditionally visible only when a specific variable is “truthy” we made available the <fl-if> block available:

<fl-if data-path="fields.title">
  This will only be shown when there is a title. The title is {! fields.title !}
</fl-if>

Note: A "truthy" value is a value that translates to **true** when evaluated in a Boolean context.

You can also the shorthand syntax as shown below:

{! if title !}
  This will only be shown when there is a title. The title is {! fields.title !}
{! endif !}

Else blocks are also supported:

{! if title !}
  This will only be shown when there is a title.
{! else !}
  This will be shown when there is no title.
{! endif !}

Loops and iterators for arrays

You can use the <fl-each> block to automatically render an array of items based on a sample template to be compiled with each item in the array as the context:

<fl-each data-path="fields.people" data-context="person">
  <template>
    <li>{! person.firstName !}</li>
  </template>
</fl-each>

You can also the shorthand syntax as shown below:

{! each person in people !}
  <li>{! person.firstName !}</li>
{! endeach !}

Binding to variables

Blocks for conditional visibility

Loops and iterators for arrays

Further reading

Methods