Afficher conditionnellement l'élément en utilisant Aurelia

Donc, j'ai mon auth classe injecté dans mon 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; }
}

donc, à mon app.html

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

comment puis-je faire de cet élément conditionnellement écran en fonction de mon appli de lecture de la fonction.

source d'informationauteur Callum Linington

  1. 26

    Vous pouvez utiliser si.lier conditionnelle, lier vos éléments DOM.

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

    En option, vous pouvez également utiliser show.se lier, mais qui ne fera que masquer vos éléments DOM. Où comme si.bind ne pas rendre sur votre page.

  2. 3

    Si vous avez besoin de supprimer l'élément complètement à partir de la majoration lorsque la condition n'est pas remplie, vous pouvez utiliser if.bind (comme @Pratique Gajjar répondu):

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

    Si vous avez besoin de manière conditionnelle display: none sur l'élément, vous pouvez utiliser show.bind:

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

    Pour plus de détails regardez http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/6.

  3. 1

    J'ai donc créé un convertisseur de valeurs:

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

    Ensuite dans mon app.html:

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

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

    Boom, c'est fait.

  4. 1

    Vous pouvez utiliser if.bind et show.bind de liaison d'un élément en vérifiant une condition