Question

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

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

有更简洁的方法吗？

请注意，使用show.bind并不是我所追求的，因为这相当于display:none而我实际上需要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>

有关示例，请参阅this GistRun。

绑定到css可见性

1 个答案: