如何在Aurelia中的自定义元素中绑定"readonly“？

Question

我在html文件中有以下元素：

<require from="_controls/time-slot-slider"></require>

    <time-slot-slider id="zeitraum" min="0" max="24" length="4" value="4"
                              value.two-way="functionConfig.startTime" if.bind="functionConfig.isAutomatic === true"
                              readonly.bind="!mayFunctionTestEditTime"></time-slot-slider>

自定义元素在这里(时间槽-滑块.time)：

<template class="range-slider time-slot">
  <div>${duration}</div>
  <input type="range" min.bind="min" max.bind="maxStart" step.bind="step" value.bind="value">
</template>

和时隙滑块：

import { bindable, customElement } from 'aurelia-templating'
import moment from 'moment/moment'
import Moment = moment.Moment

@customElement('time-slot-slider')
export class TimeSlotSlider {

  @bindable public min: number = 0.0
  @bindable public max: number = 24.0
  @bindable public step: number = 0.5
  @bindable public value: number = 0.0
  @bindable public length: number = 4.0

  public get maxStart (): number {
    return this.max - this.length
  }

  public get from (): Moment {
    return TimeSlotSlider.numberToMoment(this.value)
  }
....

但是readonly.bind不起作用。我试图绑定只读读物

@bindable readOnly: boolean，但我没有任何成功。我怎么才能修好它？

Answer 1

我认为问题在于您只将readonly应用于您的自定义元素：

<time-slot-slider readonly.bind="!mayFunctionTestEditTime"></time-slot-slider>

您已经提到您尝试在组件的视图模型上定义@bindable readOnly: boolean，但我假设您忘记将它应用于input本身。显然，仅仅是它的存在并不会神奇地导致它被应用到输入中，因此，就像这样，您的视图模型上基本上有一个属性，您没有将它用于任何东西。

解决方案是保持VM上的@bindable readonly: boolean属性，但也将其值绑定到实际输入--本质上是“转发”组件下到实际控件的值：

<input type="range" readonly.bind="readonly" ... />

给属性一个默认值也是个好主意，请参阅this答案(特别是注释)以了解原因。