Skip to content

Rendering (actually not rendering, just task) could happen multiple times (in multiple micro tasks), getterThrottle could cache wrong value #1

Open
@3cp

Description

@3cp

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions