Aurelia綁定，將一個函數綁定到一個對象的屬性而不使用propertyObserver

Question

所以通常，當我想訂閱一個變量時，我只需聲明該變量並用變量名稱聲明一個函數，然後單詞'Changed '在如下功能的結尾：

test = ''; 

testChanged() { 
// do stuff here 
} 

Aurelia提供了一個很好的方式來處理這個問題。但是，我該怎麼辦，如果我想訂閱即物體內不使用bindingEngine.propertyObserver

例如一個屬性：

model = { 
    a: '', 
    b: '' 
} 

如何使用與上述相同的約定訂閱model.a？

Answer 1

您將希望使用Object.defineProperty方法來監視對象的特定屬性以進行更改。我相信這是在大多數情況下Aurelia @bindable和@observable方法在幕後工作的方式。

Object.defineProperty(this.model, 'a', { 
    configurable: true, 
    enumerable: true, 
    get:() => { 
     return this.model.__a; 
    }, 
    set: (v) => { 
     this.model.__a = v; 
     this.modelChanged(v); 
    } 
}); 

值得一提的第一件事是setter方法set你不能設置初始值內，否則將觸發一個遞歸循環，並拋出一個堆棧錯誤，讓你值分配給前綴雙下劃線名稱，類似於臨時隱藏變量。

然後我們班裏面定義我們的回調函數：

modelChanged(value) { 
    console.log(value); 
} 

最後，將其結合在一起，並使用setTimeout的測試：

export class MyViewModel { 
    model = { 
     a: '', 
     b: '' 
    };  

    constructor() { 
     Object.defineProperty(this.model, 'a', { 
      configurable: true, 
      enumerable: true, 
      get:() => { 
       return this.model.__a; 
      }, 
      set: (v) => { 
       this.model.__a = v; 
       this.modelChanged(v); 
      } 
     }); 

     setTimeout(() => { 
      this.model.a = 'HELLO!'; 
     }, 3000); 
    } 

    modelChanged(value) { 
     console.log(value); // After 3 seconds, this should be "HELLO!" in the browser console. 
    } 
} 

說了這一切，值得注意的是bindingEngine.propertyObserver功能本質上是在引擎蓋下做同樣的事情。我會誠實地考慮使用propertyObserver，而不是在應用程序中引入一堆代碼行來觀看屬性。