将视图模型中的属性绑定到Aurelia中的自定义元素

Question

更新:

其他人报告说这个样本适合他们.听起来我做错了什么但我没有代码,所以我无法检查问题是什么.

原始问题:

我有以下自定义元素与以下视图模型和视图:

import {bindable} from 'aurelia-framework';
export class Test1 {
  @bindable name = null;
}

<template>
  <div>Name: ${name}</div>
</template>

然后我使用上面的自定义元素(这是骨架项目中的欢迎页面)有一个这个视图和视图模型:

export class Welcome {
  constructor() {
    this.name = 'Test';
  }
}

<template>
  <require from="./components/test1"></require>
  <test1 name.bind="name"></test1>
</template>

我的期望是看"名字:测试",但我只得到"姓名:".如果我使用字符串并删除".bind",那么它的工作原理如下:

<test1 name="Test"></test1>

但是,每当我更新"App"视图模型中的"name"字段时,我希望它自动更新.

我不确定我做错了什么.我没有在控制台中看到任何错误.

我将此示例基于Aurelia的骨架示例项目.aurelia-framework的版本是0.11.0.

Answer 1

“Welcome”类中的 prop“name”应该是可绑定的。

import {bindable} from 'aurelia-framework';

export class Welcome {
  @bindable name = ''

  constructor() {
    this.name = 'Test';
  }
}