aurelia:在您的虚拟机中自定义定义的虚拟机

嗨，我正在寻找一种方法，可能会在我当前的虚拟机中添加新的虚拟机对象 有人能帮我怎么做吗

这个想法是，这应该是一个输出

Hi!
my name is jhonny

到目前为止，我掌握了一些代码

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>

也试过

<foo item.bind="fooVar"></foo>
<foo bind="fooVar"></foo>
<foo model.bind="fooVar"></foo>

 <compose
      model.bind="fooVar"
      view-model="foo">
    </compose>

---

他们都给我的名字是没有变量名的。所以我猜它没有绑定

我认为您不需要实例化Foo

可能应该是：

<foo name.bind="fooVar"></foo>

---

您声明的目标是：在当前VM中添加VM对象。下面是代码，它删除了您正在添加的自定义元素，并在主VM中使用一个本身是对象的属性：

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;
  }
}

我创建了一个示例来说明上面的内容，它是用TypeScript编写的

如果您想尝试沙盒代码项目

我添加了一个示例，以显示您所询问的方法的替代方法

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;
  }
}