Comment lier "readonly" dans un élément personnalisé dans Aurelia?

Question

je l'élément suivant dans le fichier 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> 

élément personnalisé est ici (tranche de temps 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> 

et de temps sous-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) 
    } 
.... 

Mais readonly.bind ne fonctionne pas. J'ai essayé de lier readonly par

@bindable readOnly: boolean mais je n'ai eu aucun succès. Comment puis-je le réparer?

Answer 1

Je crois que le problème est que vous appliquez seulement readonly à votre élément personnalisé:

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

Vous avez mentionné que vous aviez essayé de définir @bindable readOnly: boolean sur viewmodel du composant, mais je suppose que vous aviez oublié d'appliquer au input lui-même. Évidemment, juste sa présence ne fera pas magiquement l'appliquer à l'entrée, donc comme ça, vous avez fondamentalement une propriété sur votre viewmodel que vous n'utilisez pour rien.

La solution est de garder cette propriété @bindable readonly: boolean sur la machine virtuelle, mais lie également sa valeur à l'entrée réelle - essentiellement « expédition » la valeur de la composante descend au contrôle réel:

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

Il est également une bonne idée de donner aux propriétés une valeur par défaut, voir this réponse (en particulier les commentaires) pour plus de détails sur pourquoi.