CODEWITHSUNDEEP
typescriptaurelia
Jan-Patrick Ahnen
Jan-Patrick Ahnen

Reputation: 1460

Aurelia with Typescript: binding using properties doesn't work

I have a custom element in Aurelia using Typescript (2.0), and want to bind some values, but it just doesn't work. Here's my example:

myelement.html:

<template>
  <div>${caption}</div>
  <div>${unit}</div>
 </template>

myelement.ts:

import { bindable } from "aurelia-framework";

export class MyElement {
    // removing the @bindable doesn't change anything
    @bindable public caption: string;
    @bindable public unit: string;
}

Usage:

<require from="./myelement"></require>
...
<myelement caption.bind="currentvalue" unit=" km"></myelement>

The currentvalue property is defined (in the class using the custom element) as

public currentvalue: number = 11;

The myelement is inserted correctly, but placeholders are replaced with empty text (i.e. removed), even the "unit" which is just a text.

What interestingly does work for the "unit" placeholder is:

myelement.html:

<template bindable="unit">
  <div>${caption}</div>
  <div>${unit}</div>
 </template>

In this case, the ${unit} is replaced by " km".

Somehow Aurelia doesn't get the connection between the custom-element's html and viewmodel. Binding using the bindable attribute works, but only if it isn't bound to a property. The myelement.js file gets loaded correctly (I'm using SystemJS with AMD modules). What have I been missing?

Update:

I changed in myelement.ts @bindable to @bindable() and now the "unit" is bound correctly - the placeholder in the template is correctly replaced by " km". But the binding using a property (the caption in my case) still doesn't work.

Update 2: Finally I got it to work. The parent custom element (which uses myelement) was included using <require from="./myparentelement.html"> so its viewmodel wasn't attached...

Upvotes: 0

Views: 898

Answers (1)

Jan-Patrick Ahnen
Jan-Patrick Ahnen

Reputation: 1460

The parent custom element wasn't required properly: <require from="./myparentelement.html"> instead of <require from="./myparentelement"> and I had to use @bindable() instead of @bindable.

Upvotes: 0

Related Questions