condizionale visualizzazione Elemento utilizzando Aurelia

Question

così ho la mia classe auth iniettato nella mia 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; } 
} 

così nel mio app.html

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

come faccio a fare questo elemento condizionalmente visualizzare in base alla mia app getter funzione.

Answer 1

È possibile utilizzare if.bind per collegare in modo condizionale i propri elementi DOM.

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

Opzionalmente, è anche possibile utilizzare show.bind ma questo nasconde solo gli elementi DOM. Dove come if.bind non lo renderà sulla tua pagina.

Answer 2

così ho creato un convertitore di valori:

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

Poi nel mio app.html:

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

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

Boom, fatto.

Answer 3

Se è necessario rimuovere l'elemento completamente dalla marcatura quando la condizione non è soddisfatta, è possibile utilizzare if.bind (come ha risposto @Pratik Gajjar):

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

Se è necessario impostare in modo condizionale display: none sull'elemento, si può utilizzare show.bind:

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

Per i dettagli un'occhiata a http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/6.