{"action":"created","issue":{"url":"https://api.github.com/repos/aurelia/framework/issues/910","repository_url":"https://api.github.com/repos/aurelia/framework","labels_url":"https://api.github.com/repos/aurelia/framework/issues/910/labels{/name}","comments_url":"https://api.github.com/repos/aurelia/framework/issues/910/comments","events_url":"https://api.github.com/repos/aurelia/framework/issues/910/events","html_url":"https://github.com/aurelia/framework/issues/910","id":364738368,"node_id":"MDU6SXNzdWUzNjQ3MzgzNjg=","number":910,"title":"CompositionTransaction and CompositionTransactionNotifier not work as per 367","user":{"login":"Spaceman1861","id":7098812,"node_id":"MDQ6VXNlcjcwOTg4MTI=","avatar_url":"https://avatars0.githubusercontent.com/u/7098812?v=4","gravatar_id":"","url":"https://api.github.com/users/Spaceman1861","html_url":"https://github.com/Spaceman1861","followers_url":"https://api.github.com/users/Spaceman1861/followers","following_url":"https://api.github.com/users/Spaceman1861/following{/other_user}","gists_url":"https://api.github.com/users/Spaceman1861/gists{/gist_id}","starred_url":"https://api.github.com/users/Spaceman1861/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Spaceman1861/subscriptions","organizations_url":"https://api.github.com/users/Spaceman1861/orgs","repos_url":"https://api.github.com/users/Spaceman1861/repos","events_url":"https://api.github.com/users/Spaceman1861/events{/privacy}","received_events_url":"https://api.github.com/users/Spaceman1861/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-09-28T04:37:01Z","updated_at":"2018-10-03T02:02:59Z","closed_at":null,"author_association":"NONE","body":"**I'm submitting a bug report**\r\n\r\n* **Library Version:**\r\n      \"aurelia-after-attached-plugin\": \"github:aurelia-ui-toolkits/aurelia-after-attached-plugin@^0.1.3\",\r\n      \"aurelia-bootstrapper\": \"npm:aurelia-bootstrapper@^2.3.0\",\r\n      \"aurelia-cookie\": \"npm:aurelia-cookie@^1.0.10\",\r\n      \"aurelia-event-aggregator\": \"npm:aurelia-event-aggregator@^1.0.1\",\r\n      \"aurelia-fetch-client\": \"npm:aurelia-fetch-client@^1.6.0\",\r\n      \"aurelia-framework\": \"npm:aurelia-framework@^1.3.0\",\r\n      \"aurelia-kendoui-bridge\": \"npm:aurelia-kendoui-bridge@^1.8.0\",\r\n      \"aurelia-pal\": \"npm:aurelia-pal@^1.8.0\",\r\n      \"aurelia-pal-browser\": \"npm:aurelia-pal-browser@^1.8.0\",\r\n      \"aurelia-router\": \"npm:aurelia-router@^1.6.3\",\r\n      \"aurelia-templating-resources\": \"npm:aurelia-templating-resources@^1.7.1\"\r\n\r\n**Please tell us about your environment:**\r\n* **Operating System:**\r\nWindows 10\r\n\r\n* **Node Version:**\r\n8.11.1\r\n\r\n* **NPM Version:**\r\n6.4.0\r\n\r\n* **Aurelia CLI OR JSPM OR Webpack AND Version**\r\nJSPM 0.16.53\r\n\r\n* **Browser:**\r\nall\r\n\r\n* **Language:**\r\nTypeScript 3\r\n\r\n\r\n**Current behavior:**\r\nIm am trying to setup usage of CompositionTransaction as described in https://github.com/aurelia/framework/issues/367.\r\n\r\n```\r\nimport { inject,  CompositionTransaction, CompositionTransactionNotifier } from \"aurelia-framework\";\r\n\r\n@inject(CompositionTransaction)\r\nexport class Dashboard {\r\n    public compositionTransactionNotifier: CompositionTransactionNotifier;\r\n    public compositionTransaction: CompositionTransaction;\r\n\r\n    private timeToWaitBetweenStates: number = 5000;\r\n\r\n    constructor(\r\n        compositionTransaction: CompositionTransaction\r\n    ) {\r\n        this.compositionTransaction = compositionTransaction;\r\n        this.compositionTransactionNotifier = this.compositionTransaction.enlist();\r\n\r\n        this.log(\"Constructor called\");\r\n        setTimeout(() => {\r\n                this.compositionTransactionNotifier.done();\r\n                this.log(\"Constructor done\");\r\n            },\r\n            this.timeToWaitBetweenStates\r\n        );\r\n    }\r\n\r\n    public bind() {\r\n        this.compositionTransactionNotifier = this.compositionTransaction.enlist();\r\n\r\n        this.log(\"Bind called\");\r\n        setTimeout(() => {\r\n                this.compositionTransactionNotifier.done();\r\n                this.log(\"Bind done\");\r\n            },\r\n            this.timeToWaitBetweenStates\r\n        );\r\n    }\r\n\r\n    public attached() {\r\n        this.compositionTransactionNotifier = this.compositionTransaction.enlist();\r\n\r\n        this.log(\"Attached called\");\r\n        setTimeout(() => {\r\n                this.compositionTransactionNotifier.done();\r\n                this.log(\"Attached done\");\r\n            },\r\n            this.timeToWaitBetweenStates\r\n        );\r\n    }\r\n\r\n    public detached() {\r\n        this.compositionTransactionNotifier = this.compositionTransaction.enlist();\r\n\r\n        this.log(\"Detached called\");\r\n        setTimeout(() => {\r\n                this.compositionTransactionNotifier.done();\r\n                this.log(\"Detached done\");\r\n            },\r\n            this.timeToWaitBetweenStates\r\n        );\r\n    }\r\n\r\n    public unbind() {\r\n        this.compositionTransactionNotifier = this.compositionTransaction.enlist();\r\n\r\n        this.log(\"Unbind called\");\r\n        setTimeout(() => {\r\n                this.compositionTransactionNotifier.done();\r\n                this.log(\"Unbind done\");\r\n            },\r\n            this.timeToWaitBetweenStates\r\n        );\r\n    }\r\n\r\n    public log(text) {\r\n        console.log(\r\n            text,\r\n            this,\r\n            this.compositionTransaction[\"_compositionCount\"]\r\n        );\r\n    }\r\n}\r\n```\r\n\r\nThis outputs\r\n14:27:36.102 CvLogger.ts:3 Constructor called (3) [Dashboard, 1]\r\n14:27:36.162 CvLogger.ts:3 Bind called (3) [Dashboard, 2]\r\n14:27:36.258 CvLogger.ts:3 Attached called (3) [Dashboard, 3]\r\n14:27:41.109 CvLogger.ts:3 Constructor done (3) [Dashboard, 2]\r\n14:27:41.167 CvLogger.ts:3 Bind done (3) [Dashboard, 1]\r\n14:27:41.263 CvLogger.ts:3 Attached done (3) [Dashboard, 0]\r\n\r\n**Expected/desired behavior:**\r\nI expect for each lifecycle step to finished 5 seconds after the last eg\r\n\r\n14:27:00.000CvLogger.ts:3 Constructor called (3) [Dashboard, 1]\r\n14:32:00.000CvLogger.ts:3 Constructor done (3) [Dashboard, 0]\r\n14:32:00.000CvLogger.ts:3 Bind called (3) [Dashboard, 1]\r\n14:37:00.000CvLogger.ts:3 Bind done (3) [Dashboard, 0]\r\n14:37:00.000CvLogger.ts:3 Attached called (3) [Dashboard, 1]\r\n14:42:00.000CvLogger.ts:3 Attached done (3) [Dashboard, 0,]\r\n\r\n* **What is the motivation / use case for changing the behavior?**\r\nI wish have data loaded before moving to the next step.\r\n"},"comment":{"url":"https://api.github.com/repos/aurelia/framework/issues/comments/426488285","html_url":"https://github.com/aurelia/framework/issues/910#issuecomment-426488285","issue_url":"https://api.github.com/repos/aurelia/framework/issues/910","id":426488285,"node_id":"MDEyOklzc3VlQ29tbWVudDQyNjQ4ODI4NQ==","user":{"login":"Spaceman1861","id":7098812,"node_id":"MDQ6VXNlcjcwOTg4MTI=","avatar_url":"https://avatars0.githubusercontent.com/u/7098812?v=4","gravatar_id":"","url":"https://api.github.com/users/Spaceman1861","html_url":"https://github.com/Spaceman1861","followers_url":"https://api.github.com/users/Spaceman1861/followers","following_url":"https://api.github.com/users/Spaceman1861/following{/other_user}","gists_url":"https://api.github.com/users/Spaceman1861/gists{/gist_id}","starred_url":"https://api.github.com/users/Spaceman1861/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Spaceman1861/subscriptions","organizations_url":"https://api.github.com/users/Spaceman1861/orgs","repos_url":"https://api.github.com/users/Spaceman1861/repos","events_url":"https://api.github.com/users/Spaceman1861/events{/privacy}","received_events_url":"https://api.github.com/users/Spaceman1861/received_events","type":"User","site_admin":false},"created_at":"2018-10-03T02:02:59Z","updated_at":"2018-10-03T02:02:59Z","author_association":"NONE","body":"Ok so i have managed to replicate in the gist looks like it only occurs when I nest additional viewmodels.\r\n\r\nUp until that point as you say the bind => attached CompositionTransaction is observed.\r\n\r\nWhilst I would prefer to have all the steps between lifecycle state functional I really only need one to work so bind => attached is fine.\r\n\r\nHere is the gist.\r\nhttps://gist.run/?id=e96391f6787b9695bdae3800ffabba54\r\n\r\nFor me it outputs this:\r\n\r\n```BaseWidget : Constructor called\r\nDashboard : Constructor done\r\nDashboard : Bind called\r\nDashboard : Attached called\r\nDashboard : Bind done\r\nDashboard : Attached done\r\nBaseWidget : Constructor called\r\nSubWidget : Bind called\r\nSubWidget : Attached called\r\nSubWidget : Constructor done\r\nSubWidget : Bind done\r\nSubWidget : Attached done\r\nBaseWidget : Constructor called\r\nSuperSubWidget : Bind called\r\nSuperSubWidget : Attached called\r\nSuperSubWidget : Constructor done\r\nSuperSubWidget : Bind done\r\nSuperSubWidget : Attached done\r\n```\r\n\r\nIf i modify the app.html to:\r\n```\r\n<template>\r\n  <require from=\"./sub-widget\"></require>\r\n  \r\n  <div repeat.for=\"log of logs\">\r\n    <div>${log}</div>\r\n  </div>\r\n</template>\r\n```\r\n\r\nI get:\r\n\r\n```\r\nBaseWidget : Constructor called\r\nDashboard : Constructor done\r\nDashboard : Bind called\r\nDashboard : Attached called\r\nDashboard : Bind done\r\nDashboard : Attached done\r\n```\r\n\r\nIf i modify the app.html to\r\n```\r\n<template>\r\n  <div repeat.for=\"log of logs\">\r\n    <div>${log}</div>\r\n  </div>\r\n</template>\r\n```\r\n\r\nI get:\r\n\r\n```\r\nBaseWidget : Constructor called\r\nDashboard : Bind called\r\nDashboard : Constructor done\r\nDashboard : Bind done\r\nDashboard : Attached called\r\nDashboard : Attached done\r\n```\r\n\r\nI'm probably doing something really dumb thanks for having a look.\r\n\r\n  \r\n"}}
{"actor":{"display_login":"Spaceman1861"}}