تايبسكريبت - كيفية استخدام ديكوريتور bindable من أوريليا على خاصية تحتوي على getter و setter

ليس لدي أي مشكلة في استخدام المزخرف @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;
    }
}

أنا متأكد أنني أفوت شيئًا بسيطًا هنا...

الإجابة رقم 1

يعمل Bindable عن طريق إضافة دالة getter و setter على الخاصية الخاصة بك التي يستخدمها لمراقبة التغييرات. يُوصى باستخدام طريقة الاستدعاء $ {propertyName}Changed(newValue, oldValue) لإنجاز ما تحاول القيام به. فيما يلي مثال ES2016:

ViewModel

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 وتجاهلها في تلك الحالة.