Force rebind child view

Help Requests
1

Hello,

I have a component which has a grid-child-component. I pass the data to the grid from the parent:

<grid data.bind=data> </grid>

After the data is updated in the parent, I also need to be refresh / rebinded in child. Currently, it is not.
Data is an object:
data: {items: myType[], otherData: number}
How could I achieve that?

Thanks in advance!

2

Use https://aurelia.io/docs/binding/binding-behaviors#signal

3

You can use change handler to achieve what you want. Suppose this is your current <grid/> class:

export class Grid {
  @bindable() data;

  bind() {
    // do stuff A
    // do stuff B
  }
}

What you can do is to extract the body of bind() out into a method that handle data change, then it will be automatically called whenever data from parent of the <grid/> changes:

export class Grid {
  @bindable() data;

  bind() {
    this.dataChanged(this.data);
  }

  dataChanged(newData) {
     // do stuff A
    // do stuff B
  }
}
4

Thanks! Works fine.

Now I have different problem. In my grid I have a repeat.for, which contains a call to a method to draw an icon depending on the value of an value This value is updated in my grid, however, the method is not being called and the old icon keeps there. :confused:

5

It sounds like you are hitting some issues with binding update. There are many solutions but it will take some example code to help understand what you want to achieve.

6

I get a solution. The problem was:

In
repeat.for=item of items"

I had

<i class.bind="getIcon(item)"></i>,

In getIcon, i really need item.status, so, “item” does not changed but the inner attribute status. For that reason, class.bind didn’t call to getIcon(item) again.

All is fine now, thanks for your support!

2 Likes