Expressions and Helpers for HTML Templating

SAPUI5 provides several expressions and helpers for HTML templating.

The following expressions and helpers exist:

• plain handlebars

  The plain handlebars expressions do not refer to SAPUI5 models, but to a context which is passed along when, for example, an instance for the template is created. The following example shows how you can use plain handlebars expressions and helpers.

  <h3>{{title}}</h3>
  <ul>
  {{#each persons}}
      <li>{{firstName}} {{lastName}}</li>
  {{/each}}
  </ul>

  For more information about handlebars expressions and helpers, see the handlebars documentation.

• SAPUI5-specific helpers

  SAPUI5 provides the following helpers for HTML templating

  • {{text}}

    You use the text helper to bind texts to properties of SAPUI5 models. The helper registers to changes in the SAPUI5 model and updates the template instance if the property in the model changes. When the templating engine parses the helper, it is replaced with the new value in the model. The path attribute supports the standard SAPUI5 data binding syntax.

    Example: {{text path="/title"}}

    To bin proprties from named models, such as translatable text, you can specify this in the path attribute as follows:

    {{text path="i18n>MY_TEXT"}}

  • {{element}}

    You use the element helper to create single DOM elements. You can nest DOM elements and bind DOM attributes against values of the model.

    Example: {{element tag="div" text="Hello World" data-myattr="myvalue" style="border: 1px solid black;" class="myStyleClass"}}

    Example for use with data binding with a span DOM element as default tag name: {{element text="{/title}"}}

    Example for use with data binding and named models: {{element tag="div" text="{i18n>MY_TEXT}"}}

    Example for use with editable DOM elements for two-way binding (binding the value of an input field against a model property):

    {{element tag="input" value="{/title}"}}
    {{element tag="textarea" text="{/title}"}}

    DOM elements have the advantage that you can update them individually when the property value in the model has changed. You do not need to re-render the template completely.

  • {{control}}

    You use the control helper to creat or embed SAPUI5 controle intro a template instance. It is aligned with declarative support. The following example shows how you embed a sap.ui.commons.TextField in a template:

    {{control sap-ui-type="sap.ui.commons.TextField" value="{/title}"}}

  • {{each}}

    You can use the each helper together with SAPUI5 data binding by specifiying the path attribute:

    {{#each path="/persons"}}
      {{element text="firstName"}}
    {{/each}}