Repeater is not refreshed

Help Requests
1

I have found a problem with the repeater data binding. I have a select with options generated by a repeater. Another select controls the source of the repeater. When the selection changes in the parent select, the child select fills with the children of the selection. But if two choices in the parent select generate the same text for the options, but different model.bind (or value.bind), changing between those two choices does not refresh the repeater as it should.

It’s a little difficult to explain more clearly. Here is some code to demonstrate the bug. Changing from Number one to Number two or Number three, the selection is made in the lower select. But changing between number two and number three, the model is not updated.
app.ts:
import { Parent, Child } from ‘./model’;
import { observable } from ‘aurelia-binding’;

export class App {
Parents: Parent[];
@observable selectedParent: Parent;
selectedChildId: string;
constructor() {
this.Parents = [];
let parent = new Parent(‘1’, ‘Number one’);
parent.Children.push(new Child(‘5’, ‘Child 5’));
parent.Children.push(new Child(‘6’, ‘Child 6’));
this.Parents.push(parent);
parent = new Parent(‘2’, ‘Number two’);
parent.Children.push(new Child(‘1’, ‘First Child’));
parent.Children.push(new Child(‘2’, ‘Second Child’));
this.Parents.push(parent);
parent = new Parent(‘3’, ‘Number three’);
parent.Children.push(new Child(‘3’, ‘First Child’));
parent.Children.push(new Child(‘4’, ‘Second Child’));
this.Parents.push(parent);
this.selectedParent = this.Parents[0];
this.selectedChildId = this.Parents[0].Children[0].Id;
}
selectedParentChanged(newValue: Parent, oldValue: Parent) {
if (newValue) {
this.selectedChildId = newValue.Children[0].Id;
}
}
}
model.ts:
export class Parent {
Id: string;
Description: string;
Children: Child[];
constructor(id: string, description: string) {
this.Id = id;
this.Description = description;
this.Children = [];
}
}

export class Child {
Id: string;
Description: string;
constructor(id: string, description: string) {
this.Id = id;
this.Description = description;
}
}
app.html

${parent.Description}
${child.Description}
1 Like
2

Sorry the HTML file didn’t post correctly.
<template>
<div>
<select value.bind=“selectedParent”>
<option repeat.for=“parent of Parents” model.bind=“parent”>{parent.Description}&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div&gt; &lt;select value.bind="selectedChildId"&gt; &lt;option model.bind="-1"&gt;&lt;/option&gt; &lt;option repeat.for="child of selectedParent.Children" model.bind="child.Id"&gt;{child.Description}</option>
</select>
</div>
</template>

1 Like
3

Hey,

I created a sandbox to test this: https://codesandbox.io/s/aurelia-typescript-sandbox-hoj1f?fontsize=14&hidenavigation=1&theme=dark

If I understood you correctly then the issue did replicate for me, steps to reproduce:

  1. Select parent ‘number two’ from the first select
  2. Select ‘first child’ from the second select
  3. Select parent ‘number three’ from the first select

Expected result: selectedChildId is 3
Actual result: selectedChildId is 1

1 Like
4

Awesome help, thanks :heart:

5

Thank you for doing that. The sandbox is not working for me. The @observable handler is not being called. Thus after any selection change, selectedChild goes to -1. The behavior I’m seeing is that selectedChild is properly set when switching from Number one to Number two, but it is not set when switching from Number two to Number three.

I can’t see any reason @observable isn’t working. The relevant portions of tsconfig are more or less the same as mine.

1 Like
7

I updated the sandbox to easily demonstrate the problem:

  1. At first, Number one is selected, and the default Child 5 is selected
  2. Select Number two. The default First Child is selected.
  3. Now select number one again. The default Child 5 is selected.
  4. Now select number three. The default First Child is selected. Everything works as expected.
  5. Finally select number two. Nothing is selected in the lower list.
    Moving back and forth shows that no selection is made any time switching between Number two and Number three. Switching between one and two or one and three works as expected.

This is a bug! The only reason it doesn’t work is because the text in the select options is the same. The model is not the same. The contents of the second select should refresh, but they don’t.

1 Like
8

FYI, I can’t reproduce this behavior in Aurelia V2

1 Like
9

Forgive the outsider questions, but what is the time frame for a production release of Aurelia 2 and how much effort would it take to port a large application from 1 to 2?

1 Like
10

It’s been answered before on discourse, i’ll find the links. Mainly it’s simple to no changes for higher templating features, for lower level features, such as factory and view, the API will change. So you can expect all your code will work the same, except where you manually craft stuff

11

Thanks, I’ll poke around

1 Like