binding to custom element is not working in aurelia

Question

I want to use a custom element, bind values to it, check and manipulate them in the view model and show them in the view. This is the container's relevant statements:

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

This is the custom element relevant code:

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

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

The data doesn't get binded to the custom element.

Not sure the different between account and accountDetails in your example as it almost seems as though you use them interchangeably. You probably want account.bind="userAccount" in your html and activate() { in your js/ts code. — peinearydevelopment
activate is not a callback for custom elements. It is for three things: routed components (pages), components created through the compose element, and view models for dialogs when using the aurelia-dialog plugin. — Ashley Grant
"components created through the compose element" - it is converted from composed element — Guy E

Ashley Grant Ashley Grant · Accepted Answer · 2017-08-09T13:59:34

You need to use the bind callback. activate is a callback for routed pages (and some other cases I mentioned in a comment to your question). Also, the bound value is not passed as a parameter to the bind callback, but it will be set at that point. You do have to use this before the property name though.

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

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

Another choice is to use the ${propertyName}Changed callback. This function will be called every time the property changes. Note that this is only when the property itself changes, and not when properties on the bound property change. So you the callback won't happen if only this.account.CompanyName changes. The changed callback will provide you with the new value and old value of the property as parameters to the callback, but you can ignore the parameters if you don't want them.

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

binding to custom element is not working in aurelia

1 Answers