创建封装标签和编辑字段的可重用Aurelia小部件的最佳方法

我试图创建一个简单的Aurelia可重用小部件，它封装了标签和文本输入字段。其想法是创建这些可重用UI小部件的库，以便更轻松地组合屏幕和表单——也许可以从“Angular Formly”中学习一些知识

text-field.html模板：

${label}

text-field.js视图模型：

import {bindable} from 'aurelia-framework';

export class TextField {
  @bindable name = '';
  @bindable value = '';
  @bindable label = '';
  @bindable placeHolder = '';
}

client.html模板片段（显示文本字段的用法）：

client.js视图模型（显示文本字段的用法）：

问题: 当生成最终的HTML时，属性会“加倍”，例如同时具有id.one-way=“name”和id=“firstName”（参见下文）-为什么会这样？有没有更好的方法来完成整个可重用文本字段控制

这很正常。与在

div上执行
style.bind=“expression”
操作相同，并且
expression
具有
display:block
。您将以
结束。浏览器忽略
style.bind
，因为它不是已知的html属性。您可以忽略
Aurelia
1
 谢谢你的澄清。原因是它们是两个不同的东西。一个是HTML元素上的属性，专门供Aurelia读取。另一个是Aurelia编写的HTML元素的常规属性。
class ClientModel {
  firstName = 'Johnny';
  lastName = null;
}

export class Client{
  heading = 'Edit Client';
  model = new ClientModel();

  submit(){
    alert(`Welcome, ${this.model.firstName}!`);
  }
}

<input type="text" value.two-way="value" class="form-control au-target" id.one-way="name" placeholder.bind="placeHolder" id="firstName" placeholder="">