web-dev-qa-db-ja.com

Aureliaを使用して要素を条件付きで表示する

main.jsにauthクラスを挿入しました：

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>

この要素をアプリのゲッター関数に基づいて条件付きで表示するにはどうすればよいですか。

javascriptecmascript-6aurelia
17
Callum Linington

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がページ上でレンダリングしない場合。

30
Pratik Gajjar

条件が満たされていないときにマークアップから要素を完全に削除する必要がある場合は、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 をご覧ください。

5
metamaker

if.bindおよびshow.bindを使用して、条件をチェックすることで要素をバインドできます

1
Amjad Rehman A

そこで、値コンバーターを作成しました。

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

その後、私のapp.htmlで：

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

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

ブーム、完了。

1
Callum Linington