如何在 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-slot-slider.html):

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

和时隙-slider.ts :

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 本身。显然，只是它的存在不会神奇地导致它被应用到输入中，因此像那样，你基本上在你的视图模型上有一个你不用于任何东西的属性。

解决方案是将 @bindable readonly: boolean 属性保留在 VM 上，但还将其值绑定到实际输入 - 本质上 "forwarding" 组件获取到实际控件的值:

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

给属性一个默认值也是一个好主意，请参阅答案（尤其是评论）以了解详细信息。

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

How to bind "readonly" in custom element in Aurelia?

binding

readonly

custom-element

aurelia