Binding View-Models with collection properties - aurelia

Question

My view model has a sole property, currentProject, which itself has a child property that is an array of strings. When I bind everything to the view, all the data populates correctly including the array of strings. When I edit the data, the array of strings is not updated.
Is there something specific I have to do here to make this a two-way binding? I tried the the two-way command but it made no difference.
My View Model looks like this:
export class Edit {
currentProject;
...
}
CurrentProject gets set to an instance of the project class:
export class Project {
id = '';
name = '';
modifiedDate = '';
createdBy = '';
students = [];
}
My edit view looks like this:
<template>
<section>
<h1>Edit ${currentProject.name}</h1>
<form role="form" submit.delegate="save()">
<label for="name">Project Name</label>
<input type="text" maxlenth="100" id="name" value.bind="currentProject.name" />
<h2>Students</h2>
<div repeat.for="student of currentProject.students">
<label for="name${index}">Student ${$index + 1}</label>
<input type="text" maxlenth="100" id="name${$index}" value.bind="student" />
</div>
<button class="btn">Add Student</button>
<button type="submit" class="btn btn-primary">Update project</button>
</form>
</section>
</template>
Any help would be greatly appreciated. I suspect I am missing some minor detail.
Thanks,
Andrew

Answer 1

Looks like the issue here is due to strings (primitive type) immutability, there is no reference between string you are editing in input field and the one in the array, it's just two different copies.
That being said, there are two approaches you can take to make it work properly. The best one is to have array of object for students, maybe like this:
[{name: 'Tomas Mann'}, {name: 'Alex Bloom'}]
then repeat.for part would look like:
<div repeat.for="student of currentProject.students">
<label for="name${index}">Student ${$index + 1}</label>
<input type="text" maxlenth="100" id="name${$index}" value.bind="student.name" />
</div>
This data structure is also more flexible. For example, you can add additional student information like age, score, etc. You could even have students array to be an array of Student objects students: Student[], etc.
If you still want to use array of simple strings then you could do this:
<div repeat.for="student of currentProject.students">
<label for="name${index}">Student ${$index + 1}</label>
<input type="text" maxlenth="100" id="name${$index}" value.bind="$parent.currentProject.students[$index]" />
</div>