在 Aurelia 视图中创建动态表单

Question

问题概述

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

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

带有视图模型的控制器

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 对象推送到我的视图模型对象中的测试输入数组。

查看

在我看来，我已经为 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>

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

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

尝试的解决方案

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

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

Answer 1

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

这样做很简单：

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

您可以找到更多信息here

在 Aurelia 视图中创建动态表单

Creating a Dynamic Form in a Aurelia View

javascript

aurelia

问题概述

带有视图模型的控制器

查看

尝试的解决方案