Alfhir
November 29, 2019, 3:00pm
1
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
Alfhir
December 10, 2019, 9:02am
4
Sorry, first I had a cold and now i have to put this on hold, because I need to fix something else.
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