Binding properties from view-model to custom element in Aurelia

Question

UPDATE:

Other people have reported this sample works well for them. Sounds like I was doing something wrong but I don't have the code anymore so I can't check what was the problem.

ORIGINAL QUESTION:

I have the following custom element with the following view-model and view:

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

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

Then I have a this view and view-model using the above custom element (this is the welcome page in the skeleton project):

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

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

My expectation is to see "Name: Test" but I only get "Name: ". If I use a string and remove the ".bind" then it works:

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

But I want it to update automatically whenever I update the "name" field in the "App" view-model.

I'm not sure what I'm doing wrong. I don't see any error in the console.

I based this example on the skeleton sample project from Aurelia. Version of aurelia-framework is 0.11.0.

Answer 1

The prop "name" in "Welcome" class should be bindable.

import {bindable} from 'aurelia-framework';

export class Welcome {
  @bindable name = ''

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