Problem Übersicht
ich einen Controller mit einem View-Modell haben, die zunächst ein leeres Array enthält, die zum Speichern von ‚Test Eingänge‘ verwendet wird. Ich möchte dem Benutzer eine Schaltfläche zum Hinzufügen einer neuen Testeingabe in das Formular zur Verfügung stellen, die dem Array ein neues Testeingabeobjekt hinzufügt und die Felder anzeigt, die zum Bearbeiten der Eigenschaften benötigt werden.Erstellen einer dynamischen Form in einer Aurelia Ansicht
Dies funktioniert, wenn die Taste zum ersten Mal gedrückt wird (aber mit falscher Bindung), aber es werden keine weiteren Formularelemente erstellt, wenn erneut gedrückt wird.
Der Regler mit Blick Modell
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: []
}
};
}
}
Der Anwender wird in der Lage sein, einen Testeingang zu dem Array hinzufügen, indem Sie eine Taste drücken, die Delegierten auf diese Funktion:
addTestInput() {
this.vm.test.testInputs.push({
argumentName: "",
valueType: "",
value: ""
});
}
Diese Funktion schiebt Das Test Inputs-Array in meinem View-Model-Objekt ein neues testInput-Objekt.
Ansicht
Aus meiner Sicht habe ich eine Wiederholung für die Bindung für jedes Objekt in den TestInputs hinzugefügt Array. Die Schleife beabsichtigt, die Formularelemente zum Bearbeiten der Eigenschaften jedes Testeingabeobjekts im TestInputs-Array zu erstellen.
<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>
Als ich zuerst die drücken Testeingang Schaltfläche Hinzufügen die Formularelemente der Seite hinzugefügt werden, wie erwartet. Wenn ich jedoch die Taste erneut drücke, werden die zusätzlichen from-Elemente für das neue Objekt, das dem Array hinzugefügt wurde, nicht erstellt.
Auch scheinen die Felder zu der lokalen Schleife Variable testInput eher als das bestimmte Objekt in dem Array zu binden.
Versuchte Lösungen
Ich habe ein gehen musste über die Vorschläge an:
- Blog Post on Dynamic Forms in Aurelia
- Two Way Binding Array in Aurelia
- Aurelia Gitter Chat Log - Help from jsobell
Aber sie scheinen nicht gearbeitet haben für mich. Hat jemand Ideen?