AppML Data Binding Basics

Data binding in AppML comes down to two things: {{fieldname}} placeholders that get replaced with values, and the appml-repeat attribute that clones a block of markup once per row.

Placeholders: {{fieldname}}

Anywhere inside a template bound by appml-data, wrapping a field name in double curly braces - {{firstname}}, {{email}}, {{price}} - tells AppML to replace that text with the matching value from the current record. Placeholders can appear in ordinary text content or inside attributes, and there's no separate templating language to learn beyond the field name itself.

Example: a single record

<div appml-data="model.json">
  <h2>{{firstname}} {{lastname}}</h2>
  <p>Email: {{email}}</p>
</div>

Looping With appml-repeat

When a model's action returns a list of rows rather than one record, appml-repeat marks the element that should be repeated once per row. AppML clones that element (and everything inside it) for each row in the result, resolving {{field}} placeholders against that row's own values each time.

Example: repeating rows

<div appml-data="model.json">
  <table>
    <tr appml-repeat="employees">
      <td>{{firstname}}</td>
      <td>{{lastname}}</td>
      <td>{{department}}</td>
    </tr>
  </table>
</div>
  • Put appml-repeat on the element meant to be duplicated per row (a <tr>, a <div>, an <li>), not on a wrapper around the whole list
  • Placeholder names must match the field names the action actually returns, including case
  • Elements nested inside a repeated block can still use their own {{field}} placeholders and appml-if conditions

Showing or Hiding With appml-if

appml-if is placed on an element to control whether it appears at all, based on a condition checked against the current data - commonly used alongside appml-repeat to show a 'no results' message when a list comes back empty, or to hide a piece of markup that only makes sense for certain records.

Attribute / syntaxPurpose
appml-dataPoints an element at a model, starting the data binding for everything inside it
{{fieldname}}Replaced with a value from the current record
appml-repeatClones its element once per row in a list result
appml-ifShows or hides its element based on a condition