【问题标题】：Creating a Dynamic Form in a Aurelia View在 Aurelia 视图中创建动态表单
【发布时间】：2016-04-20 23:06:13
【问题描述】：

问题概述

我有一个带有视图模型的控制器，它最初包含一个空数组，用于存储“测试输入”。我想为用户提供一个按钮以在表单上添加一个新的测试输入，该表单将一个新的测试输入对象添加到数组并显示编辑其属性所需的字段。

这在第一次按下按钮时有效（但绑定不正确）但再次按下时无法创建其他表单元素。

带有视图模型的控制器

import {inject} from 'aurelia-framework';
import {HttpClient, json} from 'aurelia-fetch-client';
import {Router} from 'aurelia-router';
import 'fetch';
import toastr from 'toastr';

@inject(HttpClient, Router)
export class create {
    constructor(http, router) {
        this.vm = {
            test: {
                id: 0,
                description: "",
                testOutput: {
                    id: 0,
                    valueType: "",
                    value: ""
                },
                testInputs: []
            }
        };
    }
}

用户将能够通过按下代表此功能的按钮将测试输入添加到数组：

addTestInput() {      
    this.vm.test.testInputs.push({
        argumentName: "",
        valueType: "",
        value: ""
    });
}

这个函数将一个新的 testInput 对象推送到我的视图模型对象中的 Test Inputs 数组。

查看

在我看来，我已经为 TestInputs 数组中的每个对象添加了重复绑定。该循环旨在创建表单元素，用于编辑 TestInputs 数组中每个测试输入对象的属性。

<p if.bind="vm.test.testInputs.length === 0">This test has no inputs. Click the button below to add one.</p>
                <template if.bind="vm.test.testInputs.length > 0" repeat.for="testInput of vm.test.testInputs">
                    <div class="form-group">
                        <label for="testInputArgumentName${$index}">Argument Name</label>
                        <input value.bind="testInput.argumentName" type="text" class="form-control" id="testInputArgumentName${$index}" placeholder="Argument Name">
                    </div>
                    <div class="form-group">
                        <div class="form-group">
                            <label for="testInputValueType${$index}">Expected Value Type</label>
                            <select class="form-control" value.bind="testInput.valueType">
                                <option repeat.for="valueType of valueTypeList" value.bind="valueType">${valueType}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="testInputValue${$index}">Expected Value</label>
                        <template if.bind="testInput.valueType === 'Boolean'">  
                            <select class="form-control" value.bind="testInput.valueType">
                                <option>true</option>
                                <option>false</option>
                            </select>
                        </template>
                        <template if.bind="testInput.valueType !== 'Boolean'">
                            <input value.bind="testInput.value" type="text" class="form-control" id="testInputValue${$index}" placeholder="Expected Value">
                        </template>
                    </div>
                </template>
                <button click.delegate="addTestInput()" type="submit" class="btn btn-success">Add Test Input</button> <button type="submit" class="btn btn-success">Create Test</button>

当我第一次按下 添加测试输入 按钮时，表单元素会按预期添加到页面中。但是，如果我再次按下按钮，则不会创建添加到数组中的新对象的附加元素。

字段似乎绑定到本地循环变量testInput，而不是数组中的特定对象。

尝试的解决方案

我已经尝试过使用以下位置的建议：

但它们似乎对我不起作用。有人有什么想法吗？

【问题讨论】：

标签： javascript aurelia

【解决方案1】：

你的问题很简单。您不能在同一元素上使用 if 和 repeat。在您的情况下，第一行的 p 也是多余的。

这样做很简单：

<template repeat.for="testInput of vm.test.testInputs">
    ...
</template>

您可以找到更多信息here

【讨论】：