aurelia: Custom defined VM in your VM - aurelia

Question

Hi I am looking for a way to probarly add new VM objects in my current VM
Can anyone help me how to do this?
The idea is that this should output
Hi!
my name is jhonny
Code i have so far
import {foo} from 'dist/foo';
export class Main{
constructor(){
this.heading = "hi!"
this.fooVar = new Foo("jhonny");
}
}
<template>
<section>
<h2>${heading}</h2>
<import from="./foo"></import>
<foo item.bind="fooVar"></foo>
</section>
</template>
export class Foo{
static Behavior(){
return Behavior
.customElement('foo');
}
constructor(name){
this.name = name;
}
}
<template>
<section>
<h2>my name is ${name}</h2>
</section>
</template>
Also tried
<foo item.bind="fooVar"></foo>
<foo bind="fooVar"></foo>
<foo model.bind="fooVar"></foo>
<compose
model.bind="fooVar"
view-model="foo">
</compose>
They all give "my name is" without the variable name. So i guess its not binding

Answer 1

I think you don't need to instantiate the Foo.
and it probably should be:
<foo name.bind="fooVar"></foo>
and
Behaviour.withProperty('name');

Answer 2

Your stated goal is: Add VM object in current VM. Here's the code for that (it removes the "custom element" you were adding, and uses instead a property in the main VM that is itself an object):
export class Main{
constructor(){
this.heading = "hi!"
this.fooVar = new Foo("jhonny");
}
}
<template>
<section>
<h2>${heading}</h2>
<h2>my name is ${fooVar.name}</h2>
</section>
</template>
export class Foo{
constructor(name){
this.name = name;
}
}
I created a sandbox code project to illustrate the above (it is written in TypeScript)
If you want to try out the sandbox code project, here are the instructions
I added an Aurelia TypeScript Wizard Navigation Sample to show an alternative to the approach you asked about.