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
Post a Comment