javascript - Aurelia - 如何从多个表单字段捕获数据并将其存储在模型中

Question

我正在学习 Aurelia。

我的问题:

我有一个如下所示的硬编码 View :

app.html

<template> 
    <div>
        <label for="firstname">First Name</label>
        <input type="text" name="firstname" value="Bob">
        <label for="firstname">Last Name</label>
        <input type="text" name="lastname" value="Tanner">
   </div>

   <div>
       <label for="firstname">First Name</label>
       <input type="text" name="firstname" value="Lynda">
       <label for="firstname">Last Name</label>
       <input type="text" name="lastname" value="Kay">
   </div>

    <div>
        <label for="firstname">First Name</label>
        <input type="text" name="firstname" value="Alan">
        <label for="firstname">Last Name</label>
        <input type="text" name="lastname" value="Jones">
   </div>

   <button click.trigger="addEntries()">add entries</button>
</template>

当用户单击按钮时，我希望结果是如下所示的数据结构:

this.entries = [
  {firstname:"Bob", lastname:"Tanner"},
  {firstname:"Lynda", lastname:"Kay"},
  {firstname:"Alan", lastname:"Jones"}
]

<小时/>

这是我的其余代码

app.js

import {WorkEntry} from 'components/work_entry';

export class App {
  constructor() {
    this.firstname = "";
    this.lastname = "";
    this.entries = [];
  }

  addEntry(){
    this.entries.push(new WorkEntry(this.firstname,this.lastname))

  }

  addEntries(){
     // ??
     // loop through dom elements ?
  }
}

work_entry.js

export class WorkEntry {
    constructor(firstname,lastname){
        this.firstname = firstname;
        this.lastname = lastname;
    }
}

Answer 1

您想要循环遍历条目数组并将输入绑定(bind)到每个项目的属性。

<template> 
    <div repeat.for="entry of entries">
        <label for="firstname">First Name</label>
        <input type="text" name="firstname" value.bind="entry.firstname">
        <label for="firstname">Last Name</label>
        <input type="text" name="lastname" value.bind="entry.lastname">
    </div>
</template>

如果您希望 View 已从数据开始，只需使用该数据实例化 this.entries 数组，它将被显示。如果用户更改输入中的值，数组中的相应项目也将使用该值进行更新。