getterとsetterを持つプロパティでAureliaのバインディング可能なデコレータを使用する方法

Question

クラスのプロパティに@bindableデコレータを使用することに問題はありません。 など。

export class SomeClass { 
    @bindable public SomeProperty: Date = new Date(); 
} 

しかし、getter/setterの実装を持つプロパティで使用すると、私は困惑します。例えば。

私はここに簡単な何かが欠けていると確信している

export class SomeClass2 { 
    // Where should the @bindable go now? 
    private _someProperty: Date = new Date(); 

    public get SomeProperty(): Date { 
     return this._someProperty; 
    } 

    public set SomeProperty(value: Date) { 
     // Do some manipulation/validation here 
     this._someProperty = value; 
    } 
} 

...

Answer 1

バインド可能なゲッターと、それは変化を観察するために使用していますあなたの財産上のセッターを追加することで機能します。あなたがしようとしていることを達成するには、${propertyName}Changed(newValue, oldValue)コールバックメソッドを利用することをお勧めします。

のViewModel ES2016は、プライベート変数を持っていないので、私は私の見解でプライベートバッキングフィールドを使用することができるよという

import {bindable} from 'aurelia-framework'; 

export class MyCustomElement { 
    @bindable name; 

    _name; 
    errorMessage = ''; 

    nameChanged(newValue) { 
    if(newValue.length >= 5) { 
     this.errorMessage = 'Name is too long'; 
    } 
    else { 
     this._name = newValue; 
     this.errorMessage = ''; 
    } 
    } 
} 

ビュー

<template> 
    <p>Name is: ${_name}</p> 
    <p>Error is: ${errorMessage}</p> 
</template> 

注：ここではES2016の例です。 。 TypeScriptでこれを行うことができるかどうかはわかりませんが、そうでない場合は、コード内のnameプロパティの値を変更するとnameChangedコールバックが発生することに注意してください。したがって、newValueがthis._nameと等しいかどうかを確認し、その場合は無視する必要があります。