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

【问题标题】：Aurelia - how to capture data from multiple form fields and store in modelAurelia - 如何从多个表单字段中捕获数据并存储在模型中
【发布时间】：2016-11-26 10:32:40
【问题描述】：

我正在学习 Aurelia。

我的问题：

我有一个如下所示的硬编码视图：

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;
    }
}

【问题讨论】：

您没有设置绑定来查看视图模型中的值。 aurelia.io/hub.html#/doc/article/aurelia/binding/latest/…
为什么你的模板是硬编码的？

标签： javascript aurelia

【解决方案1】：

您希望遍历您的条目数组并将输入绑定到每个项目的属性。

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

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

【讨论】：