Я думал, что пытаюсь сделать что-то очень простое, но я просто не могу сделать эту работу. Весь этот пример представлен на 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
, но это все еще не сработало.
Пожалуйста, выделите мою глупость:), потому что в настоящее время я застреваю, думая, что это должно сработать.