Ako sa dá viacúčelové viazať v vlastnom prvku bez modelu zobrazenia? - aurelia, väzba aurelia

Snažím sa používať jediný zviazateľný dvomi trochu odlišnými spôsobmi vo vlastnom prvku bez modelu zobrazenia.

field-input.html:

<template bindable="label,type,property">
<div class="form-group">
<label for="${property}">${label}</label>
<input id="${property}" value.bind="${property}" type="${type}">
</div>
</template>

my-form.html:

<form ...>
<field-input label="Email address" type="text" property="email"></field-input>

Na požadovaný výsledok je:

<form ...>
<div class="form-group">
<label for="email">Email address</label>
<input id="email" value.bind="email" type="text">
</div>

Na skutočné výsledkom je chyba v konzole:

ERROR [app-router] TypeError: sourceExpression.connect is not a function(…)

Čo robím zle?

odpovede:

Musíte použiť bind namiesto tlačenia premennej vo vnútri úvodzoviek:

<template bindable="label,type,property,myValue">
<div class="form-group">
<label for.bind="property">${label}</label>
<input id.bind="property" placeholder.bind="property" value.bind="myValue" type.bind="type">
</div>
</template>

Zakaždým, keď chcete zviazať atribút html, zavolajte attr.bind="object", bez interpolácie ${}

Aktualizácia z riešenia @Seth

Pretože vo vlastnom prvku máte vstupný prvok, je dôležité ho použiť myValue.two-way="..." v zloženom zobrazení. vidieť Obojsmerné databázové prepojenie v Aurelia vlastných prvkoch - viaže vlastný prvok k rodičovskému zobrazovaciemu modelu