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

Question

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

中吸取一些教训

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

文本-field.js视图模型：

import {bindable} from 'aurelia-framework';

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

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

<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 时，属性是 "doubled up"，例如同时具有 id.one-way="name" 和 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

这很正常。就好像你在 div 上做 style.bind="expression" 而 expression 有 display:block 一样。你最终会得到 <div style.bind="expression" style="display:block"/>。浏览器会忽略 style.bind，因为它不是已知的 html 属性。您可以忽略 Aurelia 一个。

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

Best way to create a reusable Aurelia widget that encapsulates both the label and the edit field

aurelia