framework: CompositionTransaction and CompositionTransactionNotifier not work as per 367
I’m submitting a bug report
- Library Version: “aurelia-after-attached-plugin”: “github:aurelia-ui-toolkits/aurelia-after-attached-plugin@^0.1.3”, “aurelia-bootstrapper”: “npm:aurelia-bootstrapper@^2.3.0”, “aurelia-cookie”: “npm:aurelia-cookie@^1.0.10”, “aurelia-event-aggregator”: “npm:aurelia-event-aggregator@^1.0.1”, “aurelia-fetch-client”: “npm:aurelia-fetch-client@^1.6.0”, “aurelia-framework”: “npm:aurelia-framework@^1.3.0”, “aurelia-kendoui-bridge”: “npm:aurelia-kendoui-bridge@^1.8.0”, “aurelia-pal”: “npm:aurelia-pal@^1.8.0”, “aurelia-pal-browser”: “npm:aurelia-pal-browser@^1.8.0”, “aurelia-router”: “npm:aurelia-router@^1.6.3”, “aurelia-templating-resources”: “npm:aurelia-templating-resources@^1.7.1”
Please tell us about your environment:
-
Operating System: Windows 10
-
Node Version: 8.11.1
-
NPM Version: 6.4.0
-
Aurelia CLI OR JSPM OR Webpack AND Version JSPM 0.16.53
-
Browser: all
-
Language: TypeScript 3
Current behavior: Im am trying to setup usage of CompositionTransaction as described in https://github.com/aurelia/framework/issues/367.
import { inject, CompositionTransaction, CompositionTransactionNotifier } from "aurelia-framework";
@inject(CompositionTransaction)
export class Dashboard {
public compositionTransactionNotifier: CompositionTransactionNotifier;
public compositionTransaction: CompositionTransaction;
private timeToWaitBetweenStates: number = 5000;
constructor(
compositionTransaction: CompositionTransaction
) {
this.compositionTransaction = compositionTransaction;
this.compositionTransactionNotifier = this.compositionTransaction.enlist();
this.log("Constructor called");
setTimeout(() => {
this.compositionTransactionNotifier.done();
this.log("Constructor done");
},
this.timeToWaitBetweenStates
);
}
public bind() {
this.compositionTransactionNotifier = this.compositionTransaction.enlist();
this.log("Bind called");
setTimeout(() => {
this.compositionTransactionNotifier.done();
this.log("Bind done");
},
this.timeToWaitBetweenStates
);
}
public attached() {
this.compositionTransactionNotifier = this.compositionTransaction.enlist();
this.log("Attached called");
setTimeout(() => {
this.compositionTransactionNotifier.done();
this.log("Attached done");
},
this.timeToWaitBetweenStates
);
}
public detached() {
this.compositionTransactionNotifier = this.compositionTransaction.enlist();
this.log("Detached called");
setTimeout(() => {
this.compositionTransactionNotifier.done();
this.log("Detached done");
},
this.timeToWaitBetweenStates
);
}
public unbind() {
this.compositionTransactionNotifier = this.compositionTransaction.enlist();
this.log("Unbind called");
setTimeout(() => {
this.compositionTransactionNotifier.done();
this.log("Unbind done");
},
this.timeToWaitBetweenStates
);
}
public log(text) {
console.log(
text,
this,
this.compositionTransaction["_compositionCount"]
);
}
}
This outputs 14:27:36.102 CvLogger.ts:3 Constructor called (3) [Dashboard, 1] 14:27:36.162 CvLogger.ts:3 Bind called (3) [Dashboard, 2] 14:27:36.258 CvLogger.ts:3 Attached called (3) [Dashboard, 3] 14:27:41.109 CvLogger.ts:3 Constructor done (3) [Dashboard, 2] 14:27:41.167 CvLogger.ts:3 Bind done (3) [Dashboard, 1] 14:27:41.263 CvLogger.ts:3 Attached done (3) [Dashboard, 0]
Expected/desired behavior: I expect for each lifecycle step to finished 5 seconds after the last eg
14:27:00.000CvLogger.ts:3 Constructor called (3) [Dashboard, 1] 14:32:00.000CvLogger.ts:3 Constructor done (3) [Dashboard, 0] 14:32:00.000CvLogger.ts:3 Bind called (3) [Dashboard, 1] 14:37:00.000CvLogger.ts:3 Bind done (3) [Dashboard, 0] 14:37:00.000CvLogger.ts:3 Attached called (3) [Dashboard, 1] 14:42:00.000CvLogger.ts:3 Attached done (3) [Dashboard, 0,]
- What is the motivation / use case for changing the behavior? I wish have data loaded before moving to the next step.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 18 (9 by maintainers)
I see what you meant. I think you are correct. Let me check it again.