Binding properties from view-model to custom element in Aurelia

5
votes

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.

1
aurelia
did you try to use different names in the app and in the custom element ? I mean like appName and customName for the attribute if you see what I mean ? Aurelia is still quite new, I don't why but there could be a problem if you use the same name for the custom attribute and the javascript attribute in the app. Though I seriously doubt it – sam
another thing, could you add the imports you did in each file ? – sam
I tried your code, it works perfectly for me – sam
Thanks sam. I tried changing the name and it didn't work. I added the imports and also explained a bit better where I'm using the custom element, which is the welcome page in the skeleton project. – dgaviola
Did you try using the latest skeletton app ? I had a problem in the 11 myself and anyway the 13 is the last one containing breaking changes, better to start from here – sam

1 Answers

1
votes

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

import {bindable} from 'aurelia-framework';

export class Welcome {
  @bindable name = ''

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