绑定到CSS可见性

Question

使用Aurelia的CSS绑定，您必须使用此语法

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

还有更简洁的方法吗？

请注意，使用show.bind并不是我想要的，因为它等效于display:none而我实际上想要的是visible visibility:hidden （因此元素占用了其空间但不可见）

这样的事情将是理想的

<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>

有关示例，请参见此GistRun 。