Aurelia ha un'alternativa da orologio AngularJS $?

Question

Sto provando a migrare il mio attuale progetto Angular.js su Aurelia.js. sto cercando di fare qualcosa di simile:

report.js

export class Report { 
     list = []; 

     //TODO 
     listChanged(newList, oldList){ 
      enter code here 
     } 
} 

report.html

<template> 
    <require from="component"></require> 
    <component list.bind="list"></component> 
</template> 

Quindi la domanda è: come rilevare quando è il lista cambiata?

In Angular.js posso fare

$scope.$watchCollection('list', (newVal, oldVal)=>{ my code }); 

Forse Aurelia avere qualcosa di simile?

Answer 1

Per i campi @bindable, il listChanged(newValue, oldValue) viene chiamato ogni volta che viene aggiornato il valore list. Si prega di dare un'occhiata Aurelia docs

@customAttribute('if') 
@templateController 
export class If { 
    constructor(viewFactory, viewSlot){ 
    // 
    } 

    valueChanged(newValue, oldValue){ 
    // 
    } 
} 

È anche possibile utilizzare ObserveLocator, come descritto nel blogpost di Aurelia autore here:

import {ObserverLocator} from 'aurelia-binding'; // or 'aurelia-framework' 

@inject(ObserverLocator) 
class Foo { 
    constructor(observerLocator) { 
    // the property we'll observe: 
    this.bar = 'baz'; 

    // subscribe to the "bar" property's changes: 
    var subscription = this.observerLocator 
     .getObserver(this, 'bar') 
     .subscribe(this.onChange); 
    } 

    onChange(newValue, oldValue) { 
    alert(`bar changed from ${oldValue} to ${newValue}`); 
    } 
} 

UPD

Come accennato in this question da Jeremy Danyow:

ObserverLocator è l'interno di Aurelia l API "bare metal". C'è ora un'API pubblica per il motore di associazione che potrebbe essere utilizzato:

import {BindingEngine} from 'aurelia-binding'; // or from 'aurelia-framework' 

@inject(BindingEngine) 
export class ViewModel { 
    constructor(bindingEngine) { 
    this.obj = { foo: 'bar' }; 

    // subscribe 
    let subscription = bindingEngine.propertyObserver(this.obj, 'foo') 
     .subscribe((newValue, oldValue) => console.log(newValue)); 

    // unsubscribe 
    subscription.dispose(); 
    } 
} 

Con i migliori saluti, Alexander

Answer 2

Sembra migliore soluzione per il caso attuale è CustomeEvent

soluzione in modo completo sarebbe assomiglia a quello

report.html

<template> 
    <require from="component"></require> 
    <component list.bind="list" change.trigger="listChanged($event)"></component> 
</template> 

Component.js

@inject(Element) 
export class ComponentCustomElement { 
    @bindable list = []; 

    //TODO invoke when you change the list 
    listArrayChanged() { 
     let e = new CustomEvent('change', { 
      detail: this.lis 
     }); 

     this.element.dispatchEvent(e); 
    } 
} 

Devi cambiare elemento componente, aggiungere un po 'la funzione di innesco che la sabbia si cambia evento. Suppongo che il componente sappia quando la lista è cambiata.

Answer 3

tuo codice originale lavorerà con un piccolo ritocco:

report.js

import {bindable} from 'aurelia-framework'; // or 'aurelia-binding' 

export class Report { 
     @bindable list; // decorate the list property with "bindable" 

     // Aurelia will call this automatically 
     listChanged(newList, oldList){ 
      enter code here 
     } 
} 

rapporto.html

<template> 
    <require from="component"></require> 
    <component list.bind="list"></component> 
</template> 

Aurelia ha una convenzione che cercare un metodo [propertyName]Changed sul tuo ViewModel e chiamare automaticamente. Questa convenzione viene utilizzata con tutte le proprietà decorate con @bindable. Maggiori informazioni here