Back

Expressions

Tag object variables

When you are in a tag you can user this to access your tag:

Access tag variables

<div> <h1>{this.title}</h1> </div>

Global variables

You can access global javascript variables like this.

Global variables with a $ can be updated with the update method.

Access global variables

<div class="{app$.theme}"> </div>

All global variables are automatically available. You can publish local variables in a tag like this:

Publish a variable to make it available for all tags

class MyApp extends Tag { init() { this.publish('app$',this) } }

Methods

You can call methods from your tag or global methods:

Call methods

<div> <h1>{this.getTitle()}</h1> </div>

JavaScript

The expression is evaluated as JavaScript:

Use JavaScript

<div> <h1>{ { title: 'Test', text: 'Test' }.title }</h1> </div>

Special Syntax

Here you see some special syntax, for better use within XML:

Use then instead of (condition) ? value : undefined

<div> <div title="{ (this.active and this.title) then this.title }"></div> </div>
  • and
    can be used instead of &&
  • or
    can be used instead of ||
  • then
    (condition) then 'result' can be used instead of (condition) ? 'result' : undefined

Update variables

If you want to update a variable in your HTML code, like , you can do this by calling this.update('this.name') in your tag.:

Update a variable

In this example, we have a click-counter.

Click counter: increate the click counter and update it (JavaScript tab)

class ClickCounterExample extends Tag { init() { this.clickCounter = 0 // initialize the click-counter with 1 } countClick() { this.clickCounter++ // increase the click-counter by 1 this.update('this.clickCounter') // update the variable in the HTML } }

Show the clickCounter and call the increase function when clicked (HTML tab)

<div> <p (click)="this.countClick()">This has been clicked {this.clickCounter} times!</p> </div>

Now you can try out the click-counter from the example above (click the text)

This has been clicked 0 times!

Update a method

Call update() to update the function (JavaScript tab)

class RandomExample extends Tag { getRandom() { return Math.round(Math.random() * 1000) // just return a random number } doSomething() { this.update('this.getRandom') // update the getRandom function } }

Use the updatable function (HTML tab)

<div> <!-- display a random number --> <div>Random: {this.getRandom()}</div> <a (click)="this.doSomething()">Update random</a> </div>

Click the "Update random"-link so the function gets called again and the UI is updated.

Random: 525
Update random

Update variable (Example 2)

You can also update objects which are not directly on the tag-object, but nested in another object.

Call update() to update the HTML (HTML tab)

<div> <!-- show the value of the input field --> <div>Input value: {this.input.value}</div> <!-- call this.update() to notify about this.input.value changed --> <input (input)="this.update('this.input.value')" element="input"> </div>

Here you see the result. Type something in the input-field and the value above gets automatically updated.

Input value:

  • update( name )
    Updates the variable including all children. Can be used for local variables (like this.update('this.title')) and global variables with a $-sign in the variable name (like this.update('app$.title')).
  • updateItem( name, index )
    Update a single item in an array. The for loop will for example only rerender the updated item.

this.update('this.input') will also update all child objects like

Remove HTML element attribute

If you evaluate to false, null or undefined in an attribute expression on a HTML element, the attribute node will be removed. As soon as the value is updated, the attribute will be added again.

Return false to remove the attribute

<div class="{app$.darkSkin ? 'dark-skin' : false }"> </div>

This is the resulting HTML (in case app$.darkSkin is false or null), just an empty div-tag.

<div> </div>