Liaison bidirectionnelle entre élément parent et élément personnalisé enfant dans Aurelia

Question

Je pensais que j'essayais de faire quelque chose de très simple, mais je ne peux tout simplement pas faire ce travail. Tout cet exemple est sur plunkr

J'ai un élément personnalisé très basique qui présente un membre de données @bindable qu'il affiche et surveille avec un événement modifié. Il ressemble à ceci:

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

et la vue:

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

Le parent montre l'élément enfant, mais je veux un membre dans son modèle de vue qui est lié à l'enfant de sorte que tout changement dans le membre parent est automatiquement reflété dans l'enfant. Voici le code parent:

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

et la vue:

<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> 

Ce que je voudrais voir est des mises à jour tapées dans le champ de saisie apparaît automatiquement dans l'enfant (plus l'événement se déclenche changé) mais l'enfant ne semble pas lié du tout! J'ai également essayé d'échanger bind pour two-way juste au cas où la convention a lié one-way mais cela n'a toujours pas fonctionné. S'il vous plaît mettre en évidence ma stupidité :) parce que je suis actuellement coincé en pensant que cela devrait fonctionner.

Answer 1

La convention par défaut pour @bindable est de transformer les noms de propriétés CamelCase est d'attribuer des noms en utilisant la convention de nommage 'myProperty' -> 'my-property' (-enveloppe de tableau de bord).

De l'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 
}) 

Les valeurs par défaut et les conventions sont présentés ci-dessus. Ainsi, vous n'auriez besoin que de pour spécifier ces options si vous avez besoin de dévier.

Vous avez donc besoin d'écrire child-data.bind dans votre code HTML

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

Plunkr