Условно отображать элемент с помощью Aurelia

Итак, у меня есть класс auth, введенный в мой main.js:

import {Auth} from 'auth';
import {inject} from 'aurelia-framework';

@inject(Auth)
export class App {
    constructor(auth) {
        this.auth = auth;
    }

    get isLoggedIn() { return this.auth.isLoggedIn; }
}

поэтому в моем app.html

<form>
    <!-- form login elements -->
</form>

как я могу сделать этот элемент условно отображенным на основе функции моего приложения.

Ответ 1

Вы можете использовать if.bind для условного связывания своих элементов DOM.

 <form>
      <div if.bind="auth.isLoggedIn">
        <!--this DOM element will be bind only if auth.isLoggedIn is true-->
      </div>
 </form>

При желании вы также можете использовать show.bind, но это только скроет ваши элементы DOM. Где, как будто .bind не будет отображать его на вашей странице.

Ответ 2

Если вам нужно полностью удалить элемент из разметки, когда условие не выполнено, вы можете использовать if.bind (как ответил @Pratik Gajjar):

<template>
  <div if.bind="auth.isLoggedIn">
    <!--this DOM element will be bind only if auth.isLoggedIn is true-->
  </div>
</template>

Если вам нужно условно установить элемент display: none on, вы можете использовать show.bind:

<template>
  <div show.bind="auth.isLoggedIn">
    <!--this DOM element will be shown only if auth.isLoggedIn is true-->
  </div>
</template>

Подробнее см. http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/6.

Ответ 3

Итак, я создал конвертер значений:

export class CssdisplayValueConverter {
    toView(value) {
        return value ? 'none' : 'display';
    }
}

Затем в моем app.html:

<require from='css-display'></require>

<form css="display: ${isLoggedIn() | cssdisplay}"></form>

Бум, сделанный.