Open
Description
When clicking "update" button, local i
is updated, upper level j
is updated (ea calls subscribers in sync, not async mode).
The problem is local j
is not updated immediately, it will be updated in a micro task due to the 2 way binding.
local get message()
is rendered twice. First time, by local i
change in a micro task, then by local j
change in another micro task.
Using @getterThrottle()
here will cache wrong value "i:2 j:1", the second update "i:2 j:2" is ignored by the cache.
app.js
import {EventAggregator} from 'aurelia-event-aggregator';
import {inject} from 'aurelia-framework';
@inject(EventAggregator)
export class App {
i = 1;
j = 1;
constructor(ea) {
this.ea = ea;
this.ea.subscribe('ttt', () => {
this.j += 1;
})
}
}
app.html
<template>
<require from="./test"></require>
<test i.bind="i" j.bind="j"></test>
</template>
test.js
import {EventAggregator} from 'aurelia-event-aggregator';
import {inject, bindable, bindingMode, computedFrom} from 'aurelia-framework';
import {getterThrottle} from 'aurelia-getter-throttle';
@inject(EventAggregator)
export class Test {
@bindable({defaultBindingMode: bindingMode.twoWay}) i;
@bindable({defaultBindingMode: bindingMode.twoWay}) j;
constructor(ea) {
this.ea = ea;
}
update() {
this.i += 1;
this.ea.publish('ttt');
}
// @getterThrottle()
@computedFrom('i', 'j')
get message() {
const m = `i:${this.i} j:${this.j}`;
console.log('get message: ' + m)
return m;
}
}
test.html
<template>
<button click.trigger="update()">Update</button>
<p>${message}</p>
</template>
Metadata
Metadata
Assignees
Labels
No labels