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

【问题标题】：Binding properties from view-model to custom element in Aurelia将视图模型的属性绑定到 Aurelia 中的自定义元素
【发布时间】：2015-08-07 18:16:01
【问题描述】：

更新：

其他人报告说这个样本对他们很有效。听起来我做错了什么，但我没有代码了，所以我无法检查问题所在。

原始问题：

我有以下带有以下视图模型和视图的自定义元素：

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>

但我希望它在我更新“应用”视图模型中的“名称”字段时自动更新。

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

这个例子是基于 Aurelia 的骨架示例项目。 aurelia-framework 的版本是 0.11.0。

【问题讨论】：

您是否尝试在应用程序和自定义元素中使用不同的名称？如果您明白我的意思，我的意思是属性的 appName 和 customName 之类的？ Aurelia 仍然很新，我不知道为什么，但如果您在应用程序中为自定义属性和 javascript 属性使用相同的名称，可能会出现问题。虽然我严重怀疑它
另一件事，你能添加你在每个文件中所做的导入吗？
我尝试了你的代码，它非常适合我
谢谢山姆。我尝试更改名称，但没有成功。我添加了导入，并更好地解释了我在哪里使用自定义元素，这是骨架项目中的欢迎页面。
您是否尝试过使用最新的骷髅应用程序？我自己在 11 中遇到了问题，无论如何 13 是最后一个包含重大更改的，最好从这里开始

标签： aurelia

【解决方案1】：

“欢迎”类中的道具“名称”应该是可绑定的。

import {bindable} from 'aurelia-framework';

export class Welcome {
  @bindable name = ''

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

【讨论】：