使用Aurelia有条件地显示Element

时间:2016-02-06 16:45:39

标签: javascript ecmascript-6 aurelia

所以我将auth课程注入我的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; }
}

所以在我的app.html

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

如何根据我的app getter函数有条件地显示此元素。

4 个答案:

答案 0 :(得分:30)

您可以使用if.bind有条件地绑定DOM元素。

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

或者,您也可以使用show.bind,但这只会隐藏您的DOM元素。 if.bind不会在你的页面上呈现它。

答案 1 :(得分:5)

如果你需要在不满足条件的情况下完全从标记中删除元素,你可以使用<template> <div if.bind="auth.isLoggedIn"> <!--this DOM element will be bind only if auth.isLoggedIn is true--> </div> </template> (正如@Pratik Gajjar回答的那样):

display: none

如果您需要在元素上有条件地设置show.bind,则可以使用<template> <div show.bind="auth.isLoggedIn"> <!--this DOM element will be shown only if auth.isLoggedIn is true--> </div> </template>

gsub('-n$','', 'my_word-n')
[1] "my_word"

#to make this work for the whole data frame you can do 

my_new_df <- sapply(my_old_df, function(x) gsub('-n$','', x))

有关详细信息,请查看http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/6

答案 2 :(得分:1)

所以我创建了一个值转换器:

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

然后在我的app.html中:

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

<form css="display: ${isLoggedIn() | cssdisplay}"></form>
砰的一声,完成了。

答案 3 :(得分:1)

您可以使用if.bindshow.bind通过检查条件来绑定元素