क्या ऑरेलिया में एंगुलरजेएस $ घड़ी विकल्प है?

Question

मैं अपने वर्तमान Angular.js प्रोजेक्ट को Aurelia.js में माइग्रेट करने का प्रयास कर रहा हूं। मैं उस तरह कुछ करने के लिए कोशिश कर रहा हूँ:

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> 

तो सवाल यह है: कैसे पता लगाने के लिए जब है सूची बदल गई?

Angular.js में मैं

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

कर सकते हैं हो सकता है कि Aurelia कुछ इसी तरह की है?

Answer 1

@bindable फ़ील्ड listChanged(newValue, oldValue) फ़ील्ड को list मान अपडेट होने पर कॉल किया जाएगा। कृपया एक नज़र Aurelia docs

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

    valueChanged(newValue, oldValue){ 
    // 
    } 
} 

तुम भी रूप में Aurelia लेखक का ब्लॉग पोस्ट here में वर्णित ObserveLocator का उपयोग कर सकते हैं:

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}`); 
    } 
} 

युपीडी

जेरेमी Danyow द्वारा this question में उल्लेख किया है:

ऑब्जर्वर लोकेटर ऑरेलिया का इंटर्निया है एल "नंगे धातु" एपीआई।

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(); 
    } 
} 

सादर, सिकंदर

Answer 2

ऐसा लगता है वर्तमान मामले के लिए बेहतर समाधान CustomeEvent

तो पूर्ण समाधान होगा है: वहाँ अब है कि इस्तेमाल किया जा सकता बाध्यकारी इंजन के लिए एक सार्वजनिक एपीआई है ऐसा लगता है कि

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); 
    } 
} 

आप घटक तत्व बदल कुछ ट्रिगर समारोह है कि रेत आप ईवेंट बदलते जोड़ने के लिए। मुझे लगता है कि घटक जानता है कि सूची कब बदल गई।

Answer 3

आपका मूल कोड एक छोटी सी ट्वीक के साथ काम करेंगे:

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 
     } 
} 

रिपोर्ट।एचटीएमएल

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

Aurelia एक परंपरा है कि अपने viewmodel पर एक [propertyName]Changed विधि के लिए देखो और यह अपने आप कॉल करेंगे है। इस सम्मेलन का उपयोग @bindable से सजाए गए सभी गुणों के साथ किया जाता है। अधिक जानकारी here