web-dev-qa-db-fra.com

Afficher l'élément sous condition à l'aide d'Aurelia

J'ai donc ma classe auth injectée 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 dans mon app.html

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

comment puis-je faire afficher cet élément de manière conditionnelle en fonction de ma fonction de lecture d'application.

javascriptecmascript-6aurelia
17
Callum Linington

Vous pouvez utiliser if.bind pour lier conditionnellement 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.bind mais cela ne fera que masquer vos éléments DOM. Où comme si.bind ne le rendrait pas sur votre page.

30
Pratik Gajjar

Si vous devez supprimer complètement l'élément du balisage lorsque la condition n'est pas remplie, vous pouvez utiliser if.bind (comme @Pratik Gajjar a répondu):

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

Si vous devez définir conditionnellement 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, consultez http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/6 .

5
metamaker

Vous pouvez utiliser if.bind et show.bind pour lier un élément en vérifiant une condition

1
Amjad Rehman A

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

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

Puis dans mon app.html:

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

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

Boom, c'est fait.

1
Callum Linington