¿Cómo multiusos de un enlace en un elemento personalizado sin un modelo de vista? - aurelia, aurelia-vinculante

Estoy tratando de usar un enlace único de dos formas ligeramente diferentes en un elemento personalizado sin modelo de vista.

campo-entrada.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>

los deseado el resultado es:

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

los real El resultado es un error en la consola:

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

¿Qué estoy haciendo mal?

Respuestas

Tienes que usar bind En lugar de imprimir la variable dentro de las comillas:

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

Cada vez que desee enlazar un atributo html, simplemente llame attr.bind="object", sin las marcas de interpolación ${}

Actualización de la solución de @Seth

Ya que tiene un elemento de entrada dentro del elemento personalizado, es importante usar myValue.two-way="..." en la vista de composición. Ver Enlace de datos bidireccional en elementos personalizados de Aurelia: enlace del elemento personalizado al modelo de vista principal