Aurelia - Watch Dependency Value for Change -


suppose have class injecting class or component. there way watch changes on attributed of dependency injecting , act upon it?

for example, have following app:

app.html

<template>   <input type="text" value.bind="item">   <button click.trigger="addtolist()">add</button>    <h3>modded</h3>   <ul>     <li repeat.for="it of modded">${it}</li>   </ul>    <h3>original</h3>   <ul>     <li repeat.for="it of dep.items">${it}</li>   </ul> </template> 

app.js

import {bindable, inject} 'aurelia-framework'; import {dep} './dep';  @inject(dep) export class app {   constructor(dep) {     this.dep = dep;   }    attached() {     this.modifyitems();   }    addtolist() {     this.dep.additem(this.item);   }    modifyitems() {     this.modded = [];     (let item of this.dep.items) {       this.modded.push(item.touppercase());     }   } } 

dep.js

export class dep {   constructor() {     this.items = ['one', 'two', 'three'];   }    additem(item) {     this.items.push(item);   } } 

now, let's other component modifies dep.items. there way watch changes in app.js on this.dep.items , call modifyitems()?

assume modifyitems() more complex example maybe value converter not best option. (unless option guess)

here working plunker above example: http://plnkr.co/edit/res9um?p=preview

someone pointed me bindingengine.collectionobserver , appears needed.

app.js:

import {inject} 'aurelia-framework'; import {bindingengine} 'aurelia-binding'; import {dep} './dep';  @inject(dep, bindingengine) export class app {   constructor(dep, bindingengine) {     this.dep = dep;      let subscription = bindingengine.collectionobserver(this.dep.items)       .subscribe((newval, oldval) => {         console.debug(newval, oldval);         this.modifyitems();       });   }    attached() {     this.modifyitems();   }    addtolist() {     this.dep.additem(this.item);     this.item = '';   }    modifyitems() {     this.modded = [];     (let item of this.dep.items) {       this.modded.push(item.touppercase());     }   } } 

here working pluker: http://plnkr.co/edit/pcyxrh?p=preview


Comments

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

java - No use of nillable="0" in SOAP Webservice -

ubuntu - Laravel 5.2 quickstart guide gives Not Found Error -