2016-02-06 19 views
12

So habe ich meine auth Klasse in meine main.js injiziert:Bedingtes Anzeigeelement Aurelia mit

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; } 
} 

so in meinem app.html

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

wie kann ich dieses Element bedingt basiert auf meiner app Getter anzuzeigen Funktion.

+2

Was ist mit der if/show-Bindung? '

' http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.1/doc/article/cheat-sheet/6 – nemesv

+0

Ich konnte das nicht finden, werde einen Blick darauf werfen, Prost –

Antwort

24

Sie können if.bind verwenden, um Ihre DOM-Elemente bedingt zu binden.

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

Optional können Sie auch show.bind verwenden, aber das wird nur Ihre DOM-Elemente verbergen. Wo als if.bind wird es nicht auf Ihrer Seite rendern.

+1

wo ist die 'if' Bindung in den Dokumenten? Kann es nirgendwo finden! argh – wal

+0

Es ist im Spickzettel versteckt: http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/ –

0

Also habe ich einen Wertkonverter:

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

Da ist in meinem app.html:

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

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

Boom, getan.

+2

Wert Hinweis auf jemand anderen, der diese Frage und diese Antwort spezifisch begegnet: Sie können 'show.bind' anstelle des oben genannten Wertkonverters verwenden. Es macht effektiv das gleiche und kommt in Aurelia out-of-the-Box. '

' –

+0

Es macht keinen Sinn, einen Wert Konverter zu verwenden, wenn Aurelia diese Funktionalität eingebaut hat. – nym

+0

Nun, wenn Sie von Beta verwenden :) –

3

Wenn Sie Element entfernen müssen vollständig von Markup, wenn die Bedingung nicht erfüllt ist, können Sie if.bind verwenden (wie @Pratik Gajjar beantwortet):

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

Wenn Sie bedingt display: none setzen auf Element müssen, können Sie verwenden show.bind:

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

Einzelheiten einen Blick auf http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/6 haben.