绑定到 css 可见性

Question

使用 Aurelia 的 css 绑定你必须使用这个语法

<div css.bind="{visibility: someField ? 'visible':'hidden'}">

有更简洁的方法吗？

请注意，使用 show.bind 不是我想要的，因为这等同于 display:none 而我实际上想要 visibility:hidden（因此该元素占据了它的 space 但不可见)

像这样的东西是理想的

<div visibility.bind="someField">

Answer 1

更简单一点的语法是：

<div css=“visibility: ${someField ? 'visible':'hidden'}”>

为了更简洁，您可以轻松创建自定义属性：

import {inject} from 'aurelia-framework';

@inject(Element)
export class VisibilityCustomAttribute {
    constructor(element) {
        this.element = element;
    }

    valueChanged(newValue) {
        this.element.style.visibility = newValue ? 'visible' : 'hidden';
    }
}

并像这样使用它：

<template>
  <require from='./visibility-custom-attribute'></require>
  <div visibility.bind="someField">
</template>

有关示例，请参阅 this GistRun。

绑定到 css 可见性

bind to css visibility

aurelia