Двусторонняя привязка между родительским и дочерним пользовательскими элементами в Aurelia

Я думал, что пытаюсь сделать что-то очень простое, но я просто не могу сделать эту работу. Весь этот пример представлен на plunkr

У меня есть очень простой пользовательский элемент, который представляет элемент данных @bindable, который он отображает и контролирует с измененным событием. Это выглядит так:

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

и вид:

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

Родитель показывает дочерний элемент, но я хочу, чтобы член в его модели представлений привязывался к ребенку, поэтому любое изменение родительского элемента автоматически отражается в дочернем элементе. Здесь родительский код:

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

и вид:

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

То, что я хотел бы видеть, - это любые обновления, введенные в поле ввода, автоматически появятся в дочернем элементе (плюс событие с измененным событием), но ребенок вообще не отображается. Я также попытался заменить bind на two-way на случай, если соглашение связано с one-way, но это все еще не сработало.

Пожалуйста, выделите мою глупость:), потому что в настоящее время я застреваю, думая, что это должно сработать.

Ответы

Ответ 1

Соглашение по умолчанию для @bindable заключается в том, чтобы превратить имена свойств с верблюжьим именем в имена атрибутов, используя соглашение об именах 'myProperty' -> 'my-property' (штрих-код).

В документации :

@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
})

По умолчанию и условные обозначения показаны выше. Таким образом, вам понадобится только чтобы указать эти параметры, если вам нужно отклониться.

Итак, вам нужно написать child-data.bind в своем HTML

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

Plunkr