Aurelia component in components with async data from view

1
votes

I have a view that has a component, and that component has a child component. The view fetches data from our server. The first component implements two-way binding for some custom attributes, and it's child component does similar, using data that has been manipulated by the parent. Anyhow, when the app starts the view's component can present the fetched bound data. The component's component fails. I think I need to either update the binding, check for some event, or wait till the view has received the data before attach(). I'm not sure that the latter will look best because the component and child component can be styled to show that something is happening vs. just blocking the entire view while fetching. I found this, http://blog.williamhayes.org/2016/03/aurelia-custom-element-async-life-cycle.html; however, the import fails for me.

How can I have a view supply a component with async data that in turn supplies a child component with results?

2
componentsaurelialifecycle

2 Answers

1
votes

I cannot recall why the import was failing; however, wanted to note that the CompositionTransaction technique did solve this problem. When combined with usage of bindable decorators and changeHandlers, it provided the ideal solution. http://blog.williamhayes.org/2016/03/aurelia-custom-element-async-life-cycle.html

0
votes

I believe you are looking for the activate() hook. You can return a Promise, and the view will wait for the data. For instance:

activate() {
   return this.service.getSomeData()
      .then(data => {
         this.propertyThatIsBoundToChildComponent = data;
      });
}

More information at http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/7