Expressions

{{ }} lets you write a small piece of logic directly where you need the result: in an element's text content, in a plain HTML attribute or as the condition for b-if and b-else-if.

Basic syntax

Anything inside {{ }} is evaluated; anything outside it is left exactly as written. A single element can mix static text with one or more placeholders.

<div>The width: {{Math.floor(width)}}</div>

<p>Hello {{name}}, you have {{count}} items.</p>

A data key on its own, without {{ }}, still works the same way it always has on attributes like b-value. {{ }} is for when you need more than the raw value, formatting it, combining it with other keys or deciding something with it.

Data keys

Inside {{ }}, a bare identifier is resolved against the current context exactly like a data key anywhere else in Bindary: a plain property (title), a nested path (address.city), an array index (items[0].name) or a $-prefixed context variable such as the ones you already know from repeat and components.

Only recognised syntax compiles. Function calls outside the Math/String whitelist below, populated object or array literals and anything else outside the supported set will not compile as an expression.

Calling a controller or component method

A token followed by empty parentheses, myMethod(), calls a method instead of resolving a data key. If the expression sits inside a component and that component has a method by that name, it's called there; otherwise it falls back to the same-named method on the page's controller.

<span>{{statusLabel()}}</span>

ctrl.statusLabel = (item) => item.value ? 'Active' : 'Inactive';

Inside a component, the same call checks the component's own context first:

// on the component
statusLabel(item)
{
    return this.value ? 'Active' : 'Inactive';
}

The parentheses must be empty, there's no syntax for passing your own arguments inside the expression. The method always receives a single argument, the current item and that's the only input it gets. It's also not tracked for reactivity: if the method's return value depends on some piece of data changing elsewhere, that change won't cause the expression to re-run on its own.

Literals and operators

Supported literals: numbers, quoted strings ('...' or "..."), true/false, null and empty {} or [].

The usual comparison (==, !=, ===, <, >, <=, >=), logical (&&, ||, !), arithmetic (+ - * / %) and ternary (? :) operators are all available, along with parentheses for grouping.

<span>{{width > 50 ? 'wide' : 'narrow'}}</span>

Math and String functions

Two whitelists, nothing else is callable inside an expression.

Math: abs, ceil, floor, round, max, min, trunc, sqrt, pow, log, exp, random.

String: toLowerCase, toUpperCase, trim, replace, includes, indexOf, startsWith, endsWith, slice, substring.

{{Math.floor(width)}}
{{String.endsWith(title, '1')}}

String functions take the string as their first argument, String.endsWith(title, '1'), not title.endsWith('1'). It reads like a static call rather than a method call.

Conditionals

b-if and b-else-if take an expression the same way, whatever it evaluates to decides whether that branch renders. b-else takes no expression at all.

<ul>
    <li b-repeat="items">
        <div b-if="{{String.endsWith(title, '1')}}">Title ends with 1</div>
        <div b-else-if="{{String.endsWith(title, '2')}}">Title ends with 2</div>
        <div b-else>Title ends with other number</div>
        <div><b b-value="title"></b></div>
    </li>
</ul>

$bindary.appData.demo.expressions = {
    items: [
        { title: "Order 1" },
        { title: "Order 2" },
        { title: "Order 5" }
    ]
};

Result

Title ends with 1

Title ends with 2

Title ends with other number

Not just binding attributes

{{ }} works in any HTML attribute, plain ones included, style, class, title, whatever the element already has. Bindary checks every attribute for a placeholder, not only the ones it recognises like b-value.

<div style="width:20px; height:20px; background: {{bgColor}};"></div>

b-attributes still has its place for setting several attributes from one binding and the value string it takes can itself contain expressions per attribute: