Aurelia dynamic composition

Question

I am trying to implement dynamic composition in aurelia. More precisely I am creating tabs and for each new tab I am adding a new div and inside I am using compositionEngine.compose(...) to add the component corresponding to that tab. A working example can be found here: https://gist.run/?id=08a04dad8d94af01989d789a216195f3 . I am experiencing however some strange behaviour. For instance if I open the same component twice in 2 tabs it seems to reuse (share) the viewModel. Just open module 2 once, click change to increment the counter then open it again. It will show the previous value. Any ideas?

Answer 1

You could mark your view models with the transient decorator

 import {transient} from 'aurelia-framework'
 @transient()
 export class M2 {
     cnt = 1;

     click(event){
     this.cnt = this.cnt + 1;
   }
 }

Answer 2

Thank you James, you are right, in the mean time I understood the cause of my problem. The compositionEngine calls container.get(...) which of course returns a singleton of each class by default. Adding @transient() as you said makes the container return a new instance. What I still do not understand is how (where) does aurelia creates the model instance for other cases. I assume if the containers are indeed a tree that the model has to be registered using registerInstance in the child container (created after container.createChild())