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

Question

我正在尝试创建一个简单的Aurelia可重用小部件,它封装了标签和文本输入字段.我们的想法是创建一个包含这些可重用UI小部件的库,以便更轻松地组合屏幕和表单 - 也许从"Angular Formly"中学习一些知识.

text-field.html模板:

<template>
    <div class="form-group">
        <label for.bind="name">${label}</label>
        <input type="text" value.two-way="value" class="form-control" id.one-way="name" placeholder.bind="placeHolder">
    </div>
</template>

text-field.js视图模型:

import {bindable} from 'aurelia-framework';

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

client.html模板代码段(显示text-field的用法):

<text-field name="firstName" value.two-way="model.firstName" label="First Name" placeHolder="Enter first name"></text-field>
<text-field name="lastName" value.two-way="model.lastName" label="Last Name" placeHolder="Enter last name"></text-field>

client.js视图模型(显示文本字段的用法):

class ClientModel {
  firstName = 'Johnny';
  lastName = null;
}

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

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

问题:当生成最终的HTML时,属性被"加倍",例如同时具有id.one-way ="name"AND id ="firstName"(见下文) - 为什么这样,并且有更好的这种方法可以完成整个可重用的文本字段控制吗？:

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

Answer 1

这很正常。style.bind="expression"与在 adiv和expressionhas上执行的操作相同display:block。你最终会得到<div style.bind="expression" style="display:block"/>. 浏览器会忽略它，style.bind因为它不是已知的 html 属性。你可以忽略这Aurelia一点。