Data Binding - PageAmp/pageamp GitHub Wiki

Data binding support in PageAmp builds on expressions and scopes.

Data Context

Elements in a page can be given a data context using the reserved :data attribute. For example this code:

<div :data=[[{"name":"Joe", "role":"Admin"}]]>
  <div>Name: [[data.name]]</div>
  <div>Role: [[data.role]]</div>
</div>

generates this output:

<div>
  <div>Name: Joe</div>
  <div>Role: Admin</div>
</div>

So far, nothing new compared to normal PageAmp behaviour: it could actually be implemented using any other name for the :data attribute.

Data Attribute

What makes :data special, is:

  1. if it "points" to null, the element is automatically hidden
  2. if it "points" to an array, the element is automatically replicated.

For example this:

<div :data=[[null]]>
  <div>Name: [[data.name]]</div>
  <div>Role: [[data.role]]</div>
</div>

generates:

<div style="display: none">
  <div>Name: </div>
  <div>Role: </div>
</div>

TBD: data context cascading, refinement/replacement

Replication

If :data "points" to an array, the element is automatically replicated. For example this code:

<div :data=[[ [
    {"name":"Ann", "role":"Admin"},
    {"name":"Joe", "role":"Account"}
] ]]>
  <div>Name: [[data.name]]</div>
  <div>Role: [[data.role]]</div>
</div>

generates this output:

<div>
  <div>Name: Ann</div>
  <div>Role: Admin</div>
</div><div>
  <div>Name: Joe</div>
  <div>Role: Account</div>
</div>

When :data value change, replication is updated: if array length increases some new clones are added, if it decreases some old clones are removed, and if it stays the same all old clones are retained. In any case, of course, the contents of retained clones are updated.

Elements with a :data attribute can declare handlers for added and removed clones with :on-add-clone and :on-remove-clone. This can be used to implement visual animation for clone addition and removal.

TBD: :on-add-clone, :on-remove-clone examples

⚠️ **GitHub.com Fallback** ⚠️