Conditional Content

In HTMLbars templates, you can use if to conditionally render content.

Inline If

The inline-if syntax takes a condition parameter, a valueIfTrue parameter, and an optional valueIfFalse parameter. Here's an example of the usage:

The car is {{if this.model.isVeryNice 'very' 'not very'}} nice.

What gets generated during a build:

#[component]
pub fn CarView() -> impl IntoView {
    ...
    let signal0 = move || model.get().map(|model| model.get("isVeryNice")).unwrap_or_default();
    let signal1 = move || {if (signal0()).as_bool().unwrap_or_default() {"very"} else {"not very"}};

    view! {
        "The car is " {move || signal1()} "."
    }
}

Block If

When you have nested content, use the block-if syntax.

The car is
{{#if this.model.isVeryNice}}
    <strong>very nice</strong>
{{else}}
    nice
{{/if}}.

What gets generated during a build:

#[component]
pub fn CarView() -> impl IntoView {
    ...
    let signal0 = move || model.get().map(|model| model.get("isVeryNice")).unwrap_or_default();

    view! {
        "The car is "
        <Show when=move || { (&signal0()).as_bool().unwrap_or_default() } fallback=|| view! { "nice" }>
            <strong>"very nice"</strong>
        </Show>
        "."
    }
}