Question

您好我正在寻找一种在我当前的VM中可能添加新VM对象的方法任何人都可以帮我解决这个问题吗？

这个想法是应该输出

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>

他们都给出了“我的名字是”而没有变量名。所以我猜它没有约束力

Answer 1

我认为你不需要实例化Foo。

它可能应该是：

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

和

Behaviour.withProperty('name');

Answer 2

您声明的目标是：在当前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;
  }
}

我创建了一个sandbox code project来说明上面的内容（用TypeScript编写）

如果您想试用沙盒代码项目here are the instructions

我添加了一个Aurelia TypeScript Wizard Navigation Sample来显示您询问的方法的替代方法。

aurelia：VM中自定义的VM

2 个答案: