Question

我正在学习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;
    }
}

Answer 1

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

isPrimes

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

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

1 个答案: