问题概述

Question

问题概述

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

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

具有视图模型的控制器

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: ""
    });
}

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

查看

在我看来，我为 TestInputs 数组中的每个对象添加了重复绑定。循环打算创建表单元素，用于编辑 TestInputs 数组中每个Test Input对象的属性。

<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 ，而不是绑定到数组中的特定对象。

尝试解决方案

我已经开始使用以下建议：

但他们似乎并没有为我工作。有人有什么想法吗？

Answer 1

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

简单地这样做：

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

您可以找到更多信息here

在Aurelia视图中创建动态表单

问题概述

具有视图模型的控制器

查看

尝试解决方案

1 个答案: