AppML Reusable Includes

Why Reuse Markup

As soon as a page has more than one appml-repeat block, or more than one page shares the same header, footer, or card layout, copy-pasting that markup everywhere becomes a maintenance problem. AppML addresses this by letting an element reference a separate HTML fragment file instead of holding all its markup inline.

An include still participates in the same data binding as the rest of the page - {{fieldname}} placeholders and appml-if conditions inside the included fragment resolve against whatever record or context surrounds it, exactly as if that markup had been written inline.

<!-- main page -->
<div appml-data="model.json">
  <div appml-repeat="tasks" appml-include="task-row.html"></div>
</div>

<!-- task-row.html -->
<div class="task">
  <span>{{title}}</span>
  <span>{{done}}</span>
</div>

• A row/card template used by an appml-repeat block, kept in its own file
• A header or footer shared across every page in a small app
• A form fragment reused for both an insert screen and an update screen

Keeping Includes Focused

An include works best when it's responsible for exactly one visual unit - one row, one card, one shared header - rather than a whole page section with several unrelated jobs. Small, single-purpose fragments are easier to reuse in a second place later and easier to reason about when something renders wrong.