Signaler does not work

Hi!

I have a container that opens and loads data when you click it´s header

page.html

<page>
<history-list  history-entries.to-view="historyEntries" ref="historyContainer"></history-list>
</page>

page.js

 constructor(...) {
    ...
    const updateHistoryEntries = () =>
      this.orderService.fetchOrderHistory(this.order).then(entries => {
        this.historyEntries = entries;
      });
   
    this.containerOpenedListener = e => updateHistoryEntries();
  }

  bind(bindingContext, overrideContext) {
    this.historyContainer.addEventListener('historyContainerOpened', this.containerOpenedListener);
  }

  unbind() {
    this.historyContainer.removeEventListener('historyContainerOpened', 
    this.containerOpenedListener);
  }

history-list.html

<history-list-entry
            repeat.for="entry of historyEntries  | sort: sortProperty:sortAscending"
            entry.bind="entry & signal: 'update-history-list-bindings'"
></history-list-entry>

It also listens to various events published via event-aggregator. One event triggers

updateHistoryEntries()

(working) and signals the binding to update (not working).

// shortened
this._eventAggregator.subscribe('event',  event => {
  updateHistoryEntries();
  this.signaler.signal('update-history-list-bindings');
});

When i close and reopen the container again - triggering ‘historyContainerOpenend’ - the binding updates, but not when i try to signal it.

What could be wrong with this, please?

1 Like

I will try to take a look tomorrow, but in the meantime can you start a sandbox (from https://codesandbox.io/s/849oxmjm82) with your code? It will be easier to debug.

2 Likes

I’ve had problems using the signaler until I found out that webpack was referencing several instances of this class (due to sub-dependencies if I understood correctly). I fixed this problem by giving specific aliases to webpack config; which forces webpack to only load one version of the referenced packages:

module.exports = ({production, server, extractCss, coverage, analyze} = {}) => ({
  resolve: {
    extensions: ['.ts', '.js'],
    modules: [srcDir, 'node_modules'],
    alias: {
      'aurelia-binding': path.resolve(__dirname, 'node_modules/aurelia-binding'),
      'aurelia-store': path.resolve(__dirname, 'node_modules/aurelia-store'),
      'aurelia-templating': path.resolve(__dirname, 'node_modules/aurelia-templating'),
      'aurelia-templating-resources': path.resolve(__dirname, 'node_modules/aurelia-templating-resources'),
      'aurelia-router': path.resolve(__dirname, 'node_modules/aurelia-router'),
      '@aurelia-ux': path.resolve(__dirname, 'node_modules/@aurelia-ux'),
      'bluebird': path.resolve(__dirname, 'node_modules/bluebird')
    }
  },
 ...

I can’t tell if this will solve your situation, but I though I would share and see if it can help.

3 Likes

Sorry, first I had a cold and now i have to put this on hold, because I need to fix something else. :roll_eyes:
As soon as I can get back to resolving this, I´ll share my experiences. Thx for replying guys!

Edit:
I didn´t (a)wait for the change to happen and called the signaler too early. It´s working fine now.
-.-

    const updateHistoryEntries = () =>
      this.orderService.fetchOrderHistory( this.delphiNrForFetchingHistory )
        .then(entries => this.historyEntries = entries)
        .then(this.signaler.signal('update-history-list'));

or maybe like this (didn´t try if it´s working):

this._eventAggregator.subscribe('event',  async event => {
  await updateHistoryEntries();
  ...
2 Likes