Data binding

This document presents how a template data binding document is structured. We use plain language description of the data attributes, intended for human reading however still keeping developer friendly and short.

General notes

• Array index start from 0: This means that the index is used as an offset (0 elements away) so it should be denoted as array[0].
• Feel free to describe data in plain language in case representation is difficult.

Binding sample

Let's assume sample data JSON below.

{
    "general": {
        "categories": [
            {
                "key": "apartment",
                "label": "Wohnung"
            }
        ],
        "features": [
            {
                "key": "has-balcony",
                "label": "Balkon",
                "icon": ""
            },
            {
                "key": "has-garage",
                "label": "Garage",
                "icon": ""
            },
            {
                "key": "is-child-friendly",
                "label": "Child friendly",
                "icon": ""
            }
        ],
        "price": {
            "price_currency": "CHF",
            "listingprice": "1000",
            "price_date" : "2022-10-12"
        },
        "marketing": {
            "url": "https://example.com/123"
        }
    }
}

Target: The first category's label:

// The first item's index offset 0
general.categories[0].label 👉 /* Wohnung */

Target: The third feature's label:

// The third item's index offset 2
general.features[2].label 👉 /* Child friendly */

Action: Loop through features:

for general.features as feature  👉 /* Each loop is a feature */

Target: a feature in the loop

for general.features as feature
    feature.label 👉 /* Each loop should print label, e.g. Balkon, Garage ..  */

For cases when a data attribute sometimes exist, use question mark ? to indicate.
Target: if price exists and has listing price and currency, format with currency

if general.price?.listingprice & general.price?.currency
    general.price?.listingprice + ' ' +  general.price?.currency 👉 /* 1000 CHF */

Target: Format date via time format

general.price.price_date.format('MM/DD/YYYY')  👉 /* 10/12/2022 */

Target: Generate QR code using marketing url.

QRCode(general.marketing.url)

Target: Find key in translations and output.

t('language_key') 👉 /* Translation Value */

Upcoming data binding keys

Sometimes all dynamic data may not be available at the time of a template development kick off.
In that case we add those future bindings to translation document prefixing keys with upcoming_ string.
For example in the sample language file with upcoming keys.

For editors, working with CSV is often preferred for ease of editing. However, importing works best in JSON format, so the Uhuu JSON/CSV Utility can be helpful for quick conversion between the two.

t('upcoming_marketing_title') 👉 /* Marketing title */

Developers can use provided upcoming_ keys during development (as normal translations). Later additional data binding reverences will be provided when those become available. This way we have a standard way of future data binding handling.