04 Expression evaluation

🔷 Object navigation

data = {
    parent: {
        nested: {text: "I'm the nested obj"}
    }
}

<p data-tpl-text="parent.nested.text"></p>

renders to

<p>I'm the nested obj</p>

🔷 Nullsafe navigation

data = {
    parent: {
        empty: null
    }
}

<p data-tpl-text="parent.empty?.text"></p>

renders to

<p></p>

🔷 Bracket notation navigation

data = {
    today: "tue",
    carToPick: {
        mon: "Ferrari",
        tue: "Lambo",
        wed: "Porsche"
    }
}

<p data-tpl-text="carToPick[today]"></p>

renders to

<p>Lambo</p>

🔷 Ternary operator

data = {
    amIRich: false,
    richCar: "Maserati",
    poorCar: "Mazda"
}

<p data-tpl-text="amIRich ? richCar : poorCar"></p>

renders to

<p>Mazda</p>

🔷 Call a method

data = {
    parent: {
        nested: {
            fruits: ["apple", "banana", "tomato"]
        }
    }
}

<p data-tpl-text="parent.nested.fruits.join(', ')"></p>

renders to

<p>apple, banana, tomato</p>

🔷 Evaluate self

The symbol self refers to the current context

data = {
    parent: {
        nested: {
            fruits: ["apple", "banana", "tomato"]
        }
    }
}

<p data-tpl-each="parent.nested.fruits">{{self}}</p>

renders to

<p>apple</p><p>banana</p><p>tomato</p>

🔷 Define and call a function

Call custom defined functions

functions = {
    math: {
        sum: (...addends) => addends.reduce((a,b) => a + b, 0)
    }
}

<p data-tpl-text="#math:sum(1, 5, 3, 65)"></p>

renders to

<p>74</p>

🔷 Operators, literals and precedence

• Dict literals: e.g: {"a": 1, "b": 2}
• Array literals: e.g: [1,2,3]
• String literals: e.g: "a" or 'a'
• Template String literals: e.g: `a{var}b`
• Boolean literals: e.g: true or false
• Number literals: e.g: 3 or 3.1
• Function calls: e.g: #module:fn() or #fn(1,2,3)
• Parenthesized expressions: e.g: (a || b) && c
• Method call: e.g: a.toLowerCase() or a.toLowerCase?.()
• Computed member access: e.g: a[b] or a?.[b]
• Member access: e.g: a.b or a?.b
• Logical not operator: e.g: !a
• Relational operator: e.g: a >= b or a > b or a <= b or a <= b
• Equality operator: e.g: a == b or a != b
• Logical and operator: e.g: a && b
• Logical or operator: e.g: a || b
• Null coalescing operator: e.g: a ?? b
• Condition ternary operator: e.g: a ? b : c