Buy Us a Beer! Community Forum Micro-Consulting

Templates & Macro Expansion 📝

The Details of SA5's Data-binding Template Processors

We've redesigned our template processor and data-binding architecture in SA5. These docs will be fully rewritten to cover the new features.

Until this section is rewritten, refer to the main Data Binding documentation page.

Basic Overview

  1. Setup any custom SA5 Data sources you want, from your collection lists.

  2. In your text or rich text elements, define a context for your data-binding

  3. Tag the elements you are using as templates, which will contain macros, with [wfu-bind-content]

  4. Place macros inside of your text

e.g.;

{{ $cookie.name }} would retrieve the value of

You can then use SA5's

Dynamic DSD References, using Data-Binding Context

You can specify fixed reference items using a fully-qualified DSD like this, however if the template is in a dynamic context such as a collection list or collection page, SA5 allows you to set the context for partial DSDs to operate in.

The way this works is to assign these attributes to the parent of your wfu-bind-content tagged element.

  • wfu-bind-dsn = The data source name, e.g. my-data.

  • wfu-bind-item-id = The data source item ID, e.g. row-28.

These context elements can be on the same element as your wfu-bind-content tag, but they can also be on any ancestor element. They also do not need to be on the same element. This gives you different flexibilities

Bind the entire element using wfu-bind, will replace the entire content.

In Webflow static ( not CMS-bound ) rich text and plain-text elements you can select text and create a bold, italic, or span sub-element.

When that is created, you can select is separately, and you can assign custom attributes directly to it. In this way you can directly bind parts of a text or rich text element.

Another way is macro-expansion {{ name }}

SEO Notes

Bound data may or may not be picked up by search indexing bots. Google is generally good at executing script and indexing the page after modification, however you will need to test this yourself.

It's generally not advised to mix template processing {{ ... }} with element-level processing in the same elements. Tagging elements with [wfu-bind] which are within [wfu-bind-content]-tagged elements should work, but is not well-tested.

Page lifecycle

Inital load solution

Future

Default SA5 Template Handler

[wfu-bind-content] with no attribute.

Or default.

v1

v2

Straight literal text

e.g. a

?code=ID6079&name=Trial+User+1&color=blue&accept=true

{{ ?accept }}

Returns true.

{{ straight }}

?

Others Under Consideration

  1. Mustache.js: This is a logic-less template syntax. It can be used for HTML, config files, source code - anything. It works by expanding tags in a template using values provided in a hash or object. Handlebars.js is actually an extension of Mustache.js and adds additional features on top of it.

  2. EJS (Embedded JavaScript): EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. It supports fast rendering, custom delimiters, includes, and both client-side and server-side rendering.

  3. Pug (formerly Jade): Pug is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers. It offers features like includes, mixins, inheritance, and interpolation, and it compiles directly to JavaScript.

  4. Nunjucks: Developed by Mozilla, Nunjucks is inspired by jinja2 and supports both block-based and inheritance-based templating. It is simple and extensible and has robust features like autoescaping and macros.

  5. lodash templates: lodash, a popular JavaScript utility library, provides a simple templating function. It's less powerful than some of the other options on this list, but it's good for simple use cases and you may already be using lodash in your project.

  6. React.js: React isn't exactly a templating engine—it's a library for building user interfaces. However, it does include a powerful system for building HTML views with JavaScript, using a syntax extension called JSX. If you're already using React, you might not need a separate templating engine.

Unsupported Template Handlers

Handlebars.js

{{#each people}} {{print_person}} {{/each}}

{{#each persons}} {{>person person=.}} {{/each}}

Last updated