如何在没有视图模型的自定义元素中实现多功能绑定？

Question

我试图在一个没有视图模型的自定义元素中以两种略有不同的方式使用单个绑定.

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

我-form.html:

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

所述期望的结果是:

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

在实际的结果是在控制台中的错误:

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

我究竟做错了什么？

Answer 1

您必须使用bind而不是在引号内打印变量:

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

每次要绑定html属性时,只需调用attr.bind="object",不带插值标记${}

从@ Seth的解决方案更新

由于自定义元素中包含输入元素,因此myValue.two-way="..."在撰写视图中使用它非常重要.请参阅Aurelia自定义元素中的双向数据绑定 - 将自定义元素绑定到父视图模型