Conditional Binding¶

Conditional binding uses @if to select the HTML content to be generated based on the value in the data context. When the condition is true, the corresponding element and its child content are generated. When the condition is false, further judgment can be carried out using @else-if, or a default content can be provided using @else.

Basic syntax¶

Use a boolean property as a condition:

<p @if="{IsReady}">Ready</p>

When IsReady is true, the final HTML code is generated:

<p>Ready</p>

When IsReady is false, the p element is not generated. Conditions can also be comparison operators or logical expressions:

<p @if="{Health :le: 0}">Defeated</p>
<p @if="{IsReady :and: !IsDead}">Can start</p>

The value of @if must be enclosed in {...}. @if="IsReady" does not conform to the conditional binding syntax.

Conditional branch¶

Use @else¶

Declare @else on the next element of the same level to provide the content when the condition is false:

<p @if="{IsReady}">Ready</p>
<p @else>Waiting</p>

When IsReady is false, the final HTML code to be output is as follows:

<p>Waiting</p>

@else does not specify any conditions or other values. Each branch will only generate the side that is selected.

The following notation is invalid because hr interrupts the branch relationship, and @if and @else are not adjacent:

<!-- Invalid because another element separates @if and @else. -->
<p @if="{IsReady}">Ready</p>
<hr>
<p @else>Waiting</p>

The following notation is also invalid because @if is located within section, while @else is located outside section. Both are not at the same level.

<!-- Invalid because @if and @else must be siblings. -->
<section>
  <p @if="{IsReady}">Ready</p>
</section>
<p @else>Waiting</p>

Both branches should be placed within the same parent element and declared adjacent to each other.

<section>
  <p @if="{IsReady}">Ready</p>
  <p @else>Waiting</p>
</section>

Use @else-if¶

When multiple conditions need to be checked in sequence and only one branch should be selected, use @else-if.

<p @if="{IsLoading}">Loading</p>
<p @else-if="{HasError}">Load failed</p>
<p @else-if="{IsEmpty}">No data</p>
<p @else-if="{IsReadOnly}">Read only</p>
<p @else>Loaded</p>

Check IsLoading, HasError, IsEmpty, and IsReadOnly in sequence. When none of the conditions are true, choose @else. Only the branch where the first condition is true is generated, and subsequent conditions are not evaluated. For example, when both IsLoading and HasError are true, the final output is:

<p>Loading</p>

@else-if must provide a {...} expression, and @else does not require a value. You can also use the equivalent prefix mk:else-if.

Multiple @else-if statements can be declared in sequence, or the @else at the end can be omitted. When no condition is met and there is no @else, the content of that branch chain is not generated. Multiple independent @if statements are checked separately, and content may be generated simultaneously.

The following syntax is invalid because @else-if is placed after @else:

<!-- Invalid because @else ends the branch chain. -->
<p @if="{IsLoading}">Loading</p>
<p @else>Loaded</p>
<p @else-if="{HasError}">Load failed</p>

The following syntax is also invalid because there is no @if preceding it:

<!-- Invalid because @else-if requires a preceding @if or @else-if. -->
<p @else-if="{HasError}">Load failed</p>

@else-if Also supported template It is possible to generate multiple. .

Control multiple elements at once¶

Writing the condition on template . template No additional containers are generated by itself:

<section>
  <template @if="{HasWeapon}">
    <h2>{{ Weapon.Name }}</h2>
    <p>Damage: {{ Weapon.Damage }}</p>
  </template>
  <p @else>No weapon equipped</p>
</section>

Assuming HasWeapon is true, the weapon name is Sword, and the damage is 25. The final HTML code produced is as follows:

<section>
  <h2>Sword</h2>
  <p>Damage: 25</p>
</section>

Judgment of conditional values¶

@if not only supports boolean properties, but also can determine the result of expressions:

Non-empty strings like 'false' and '0' are considered true. They are not boolean values false or numerical values 0.

Whether the object exists allows explicitly comparing null:

<p @if="{Weapon != null}">Weapon: {{ Weapon.Name }}</p>
<p @else>No weapon equipped</p>

The conditional expression supports short-circuit logic, comparison, and null coalescence. For the complete operation rules, see Binding Syntax. In HTML, :lt:, :le:, :gt:, :ge:, :and:, and :or: can be used instead of the corresponding symbols.

Using conditions in set items¶

When placing @if within the loop content, the condition is read from the data context of the current item:

<ul @for="{Items}">
  <li @if="{Quantity :gt: 0}">{{ Name }} × {{ Quantity }}</li>
  <li @else>{{ Name }}: out of stock</li>
</ul>

Assuming the set contains Sword (quantity 1) and Potion (quantity 0), the final HTML code produced is:

<ul>
  <li>Sword × 1</li>
  <li>Potion: out of stock</li>
</ul>

If the content for when the quantity is zero is not required, simply omit @else. This controls the HTML generated for the current item. It does not remove the item from the business set, nor does it change the Count of the set.

Empty set prompt¶

An empty collection does not contain any items, therefore the @else inside the loop cannot be used to represent the empty state of the entire list. The empty state should be determined outside of the loop:

<ul @if="{Items.Count :gt: 0}" @for="{Items}">
  <li>{{ Name }}</li>
</ul>
<p @else>No items</p>

Here, we first check Items.Count within the outer context, and then iterate through Items. When the collection is empty, the final HTML code produced is as follows:

<p>No items</p>

When @if and @for are used for the same element, the condition should be evaluated before entering the loop. Each collection item should not be used as the context. When evaluating each item individually, @if should be placed inside the loop, just as in the previous example.

Condition changes and branch switching¶

After the property that determines the condition changes, the application needs to send a corresponding change notification. The binding re-evaluates the condition and switches to the corresponding branch, without the need to reload the HTML.

• When the condition changes from false to true, the @if branch is generated.
• When the condition changes from true to false, the @if branch is removed. If there is a @else, the other branch is generated.
• When the judgment result remains unchanged, retain the current branch. The text and other bindings in the current branch should still be updated accordingly.

For example, modifying IsReady requires notifying the IsReady property of the change. When determining the value of Items.Count, changes in the number of items require notification through the corresponding extension property. For details on platform integration methods, please refer to the documentation for each platform.

If only the appearance or visibility of existing elements needs to be adjusted, use the appropriate properties or style bindings. Conditional bindings are useful for selecting the page structure based on the state of the elements.