javascript - 使用 Aurelia 有条件地显示 Element

Question

所以我有我的auth类注入(inject)我的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>

如何根据我的应用程序 getter 函数有条件地显示此元素。

Answer 1

您可以使用 if.bind 有条件地绑定(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 不会在您的页面上呈现它。