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

readonly.bindは機能しません。私は読み取り専用でバインドしようとしました

@bindable readOnly: booleanしかし、私は成功しませんでした。どうすれば修正できますか？

Answer 1

私はこの問題は、あなただけのカスタム要素にreadonlyを適用することであると考えている：

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

あなたは、コンポーネントののviewmodelに@bindable readOnly: booleanを定義しようとしただろうと述べましたが、私はあなたが適用し忘れていたと仮定しますそれはinputそれ自体に。明らかに、それが存在するだけで魔法のように入力に適用されるわけではないので、あなたは基本的にビューモデル上に何も使用しないプロパティを持っています。

溶液をVMにその@bindable readonly: boolean性を保つだけでなく、実際の入力に値をバインドすることである - 本質的に「転送」成分は、実際の制御に降り値：

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

またありますプロパティをデフォルト値にすることをお勧めします。詳細については、thisの回答（特にコメント）を参照してください。