javascript - tag - title html css

Elemento de visualización condicional usando Aurelia

Question

Así que tengo mi clase de auth inyectada en mi 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; }
}

así que en mi app.html

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

¿Cómo puedo hacer que este elemento se muestre condicionalmente en función de la función de obtención de la aplicación?

Answer 1

Así que creé un convertidor de valores:

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

Luego en mi app.html:

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

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

Boom, hecho

Answer 2

Puede usar if.bind y show.bind para enlazar un elemento al verificar una condición

Answer 3

Puede usar if.bind para enlazar condicionalmente sus elementos DOM.

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

Opcionalmente, también puede usar show.bind pero eso solo ocultará sus elementos DOM. Donde como if.bind no lo mostrará en tu página.

Answer 4

Si necesita eliminar el elemento completamente del marcado cuando no se cumple la condición, puede usar if.bind (como responde @Pratik Gajjar):

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

Si necesita configurar condicionalmente display: none en el elemento, puede usar show.bind :

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

Para obtener más información, consulte http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/6 .