使用Aurelia有條件地顯示Element

Question

所以我將我的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函數有條件地顯示此元素。

Answer 1

您可以使用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將不會在您的頁面上呈現它。

Answer 2

如果你需要在不滿足條件時完全從標記中刪除元素，你可以使用if.bind （如@Pratik Gajjar回答）：

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

如果需要在元素上有條件地設置display: none ，可以使用show.bind ：

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

有關詳細信息，請查看http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/6 。

Answer 3

所以我創建了一個值轉換器：

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

然后在我的app.html中：

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

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

熱潮，完成了。

Answer 4

您可以使用if.bind和show.bind通過檢查條件來綁定元素