绑定到自定义元素在aurelia中不起作用

我想使用自定义元素，将值绑定到它，在视图模型中检查和操作它们，并在视图中显示它们。 以下是集装箱的相关声明：

<require from = "./../userAccount/userAccount"></require>
<div class="UserAccountWrapper" repeat.for="userAccount of 
userAccountsData">
<div><user-account accountDetails.bind="userAccount"></user-account></div>
</div>

---

数据未绑定到自定义元素

您需要使用

bind

回调

activate

是对路由页面的回调（以及我在对您的问题的评论中提到的一些其他情况）。此外，绑定值不会作为参数传递给

bind

回调，但会在该点进行设置。但是，您必须在属性名称之前使用

此

import { bindable } from 'aurelia-framework';
export class UserAccount{
  @bindable account;

  bind() {
    this.accountDetails.CompanyName = this.account.CompanyName == null ? "N/A" : 
    this.account.CompanyName;
    ....
  }
}

另一种选择是使用

${propertyName}Changed

回调。每次属性更改时都将调用此函数。请注意，这仅在属性本身更改时发生，而不是在绑定属性上的属性更改时发生。因此，只要

this.account.CompanyName

发生更改，回调就不会发生。更改后的回调将为您提供属性的新值和旧值作为回调的参数，但如果不需要，您可以忽略这些参数

import { bindable } from 'aurelia-framework';
export class UserAccount{
  @bindable account;

  accountChanged(newValue, oldValue) {
    this.accountDetails.CompanyName = account.CompanyName == null ? "N/A" : 
    this.account.CompanyName;
    // OR
    this.accountDetails.CompanyName = newValue || "N/A";
    ....
  }
}

---

您需要使用

bind

回调

activate

是对路由页面的回调（以及我在对您的问题的评论中提到的一些其他情况）。此外，绑定值不会作为参数传递给

bind

回调，但会在该点进行设置。但是，您必须在属性名称之前使用

此

import { bindable } from 'aurelia-framework';
export class UserAccount{
  @bindable account;

  bind() {
    this.accountDetails.CompanyName = this.account.CompanyName == null ? "N/A" : 
    this.account.CompanyName;
    ....
  }
}

另一种选择是使用

${propertyName}Changed

回调。每次属性更改时都将调用此函数。请注意，这仅在属性本身更改时发生，而不是在绑定属性上的属性更改时发生。因此，只要

this.account.CompanyName

发生更改，回调就不会发生。更改后的回调将为您提供属性的新值和旧值作为回调的参数，但如果不需要，您可以忽略这些参数

import { bindable } from 'aurelia-framework';
export class UserAccount{
  @bindable account;

  accountChanged(newValue, oldValue) {
    this.accountDetails.CompanyName = account.CompanyName == null ? "N/A" : 
    this.account.CompanyName;
    // OR
    this.accountDetails.CompanyName = newValue || "N/A";
    ....
  }
}

---

不确定示例中account和accountDetails之间的差异，因为您似乎可以互换使用它们。您可能希望在html中使用

account.bind=“userAccount”

，在js/ts代码中使用

activate（）{

。

activate

不是对自定义元素的回调。它用于三件事：路由组件（页面），通过

compose

元素创建的组件，并在使用

aurelia对话框

插件时查看对话框的模型。“通过compose元素创建的组件”-它是从组合元素转换而来的不确定示例中account和accountDetails之间的差异，因为您似乎可以互换使用它们。您可能希望在html中使用

account.bind=“userAccount”

，并

activate（）{

在js/ts代码中。

activate

不是自定义元素的回调。它用于三件事：路由组件（页面）、通过

compose

元素创建的组件，以及使用

aurelia dialog

插件时查看对话框的模型。“通过compose元素创建的组件”-它是从合成元素转换而来的