Two-way binding between parent and child custom element in Aurelia

Question

I thought I was trying to do something very simple but I just can't make this work. This entire example is on plunkr

I have a very basic custom element that present a @bindable data member that it displays and monitors with a changed event. It look like this:

import {bindable} from "aurelia-framework";
export class ChildElementCustomElement {  
  @bindable childData;  
  childDataChanged(value) {
    alert("Child Data changed " + value);
  }  
}

and the view:

<template>
  <div style="border: solid 1pt green;">
    <h2>This is the child</h2>
    This is the child data : ${childData}
  </div>
</template>

The parent shows the child element but I want a member in its view model that's bound to the child so any change in the parent member is automatically reflected in the child. Here's the parent code:

import {bindable} from "aurelia-framework";
export class App {
  parentData = "this is parent data";
}

and the view:

<template>
  <h1>Two-way binding between parent and child custom elements</h1>
  <require from="./child-element"></require>  
  <child-element childData.bind="parentData"></child-element>  
  <hr/>  
  <label>The following is the parent data:</label>
  <input type="text" value.bind="parentData"></input>  
</template>

What I'd like to see is any updates typed in the input field will automatically appear in the child (plus the changed event fires) but the child doesn't appear bound at all! I've also tried swapping bind for two-way just in case the convention has bound one-way but that still hasn't worked.

Please highlight my stupidity :) because currently I'm stuck thinking this should just work.

Answer 1

The default convention for @bindable is to turn the camel-cased property names to attribute names using the naming convention 'myProperty' -> 'my-property' (dash-casing).

From the documentation:

@bindable({
  name:'myProperty', //name of the property on the class
  attribute:'my-property', //name of the attribute in HTML
  changeHandler:'myPropertyChanged', //name of the method to invoke when the property changes
  defaultBindingMode: bindingMode.oneWay, //default binding mode used with the .bind command
  defaultValue: undefined //default value of the property, if not bound or set in HTML
})

The defaults and conventions are shown above. So, you would only need to specify these options if you need to deviate.

So you need to write child-data.bind in your HTML

<child-element child-data.bind="parentData"></child-element>

Plunkr