Aurelia의 사용자 정의 요소에서 "readonly"를 바인드하는 방법은 무엇입니까?

Question

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

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

사용자 정의 요소 (시간 슬롯 slider.html) 여기

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) 
    } 
.... 

그러나 읽기 전용 .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 답변 (특히 주석)을 참조하십시오.