Getelia ve ayarlayıcı

Question

ile bir özellik üzerinde Aurelia'nın bindable dekoratör nasıl kullanılır Bir sınıfta bir özellik için @bindable dekoratör kullanarak sorunum yok. E.g.

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

Ancak, bir getter/setter uygulamasına sahip olan özelliklerle birlikte kullanıldığında bu işe yaramıyorum. Örneğin.

Buraya basit bir şey eksik eminim

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

Bindable bir alıcı ve değişikliklerin gözlenmesi için kullandığı Mülkünüzde bir ayarlayıcı eklenerek çalışır. Yapmaya çalıştığınız şeyi başarmak için ${propertyName}Changed(newValue, oldValue) geri arama yöntemini kullanmanız önerilir.

ViewModel ES2016 özel değişkenleri olmadığı için, benim görünümünde özel destek alanını kullanabilmek için olduğumu

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 = ''; 
    } 
    } 
} 

Görünüm

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

Not: Aşağıda bir ES2016 örnektir . Bunu TypeScript'te yapabileceğinizden emin değilim, ancak yapamazsanız, kodunuzdaki name özelliğinin değerini değiştirmenin de nameChanged geri çağrılmasını tetikleyeceğini unutmayın. Yani newValue'un this._name'a eşit olup olmadığını kontrol etmeli ve bu durumda yoksaymalısınız.