Oracle JET: Passing asynchronous property to composite

Question

I want to pass an array (or observableArray) to a composite like so:

<add-training-modal id="modal" employees="[[data]]"></add-training-modal>

data is retrieved within the associated viewModel via an asynchronous call:

self.data = ko.observableArray();
UserFactory.getUsers().then(arr => {
    self.data(arr);
})

The problem: [[data]] is passed to the composite before the asynchronous call is finished. That would be fine as long as data in the composite is updated. However, this is not the case.

In the composite viewModel:

function model(context) {
    //...
    context.props.then(function (propertyMap) {
        self.properties = propertyMap;
        console.log(propertyMap.employees); // is empty []

        setTimeout(function () {
            console.log(propertyMap.employees); // is full [...]
        }, 500);
    });
}

model.prototype.attached = function(context) {
   context.props.then(function (propertyMap) {
       console.log(propertyMap.employees); // is empty []
   });
};    

I know that I could retrieve the data from within the composite. But that would not be the answer to the underlying problem.

Answer 1

In other words, the composite needs to listen for a change event, correct? Add this code:

self.composite = context.element;
$(self.composite).on('employees-changed', function (event) {
    if (event.detail.updatedFrom === 'external') {
        console.log(event.detail.value);
    }
});

In the latest version (I haven't tested this for myself):

model.prototype.attached = function(context) {
    self.composite = context.element;
    self.composite.addEventListener('employeesChanged',function(event){
        if (event.detail.updatedFrom === 'external'){
            console.log(event.detail.value);
        }
    });
};

For lots more info, check out this blog: https://blogs.oracle.com/groundside/jet-composite-components-v-events

It's the definitive guide on Oracle-JET composites.