aurelia - 创建封装标签和编辑字段的可重用 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 View 模型:

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 View 模型(显示文本字段的用法):

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"和 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"在 div和 expression有 display:block .你最终会得到 <div style.bind="expression" style="display:block"/> .浏览器忽略 style.bind因为它不是已知的 html 属性。您可以忽略 Aurelia一。