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>

MY-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="..."非常重要。见2 way databinding in Aurelia custom elements - bind custom element to parent viewmodel

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

1 个答案: