How to sync app digest cycles with fetch request results

General Q&A
1

How could one populate a view with data received from an integration using a fetch request? The fetch promise would normally occur asynchronously. This makes it difficult to pause the app and wait for the data to arrive.

2

Figured it out. If you return a promise in a callback function such as a button on-press callback or from the init function, then the platform will wait for the promise to resolve and the perform a digest cycle.

Example view code:

<var name="jobs" type="array:job" />
<object-table label="[Tap to select]" query="jobs" empty-message="No jobs are available">
    <column heading="ID">{ADAS_ID}</column>
    <column heading="Name">{job_name}</column>
    <column heading="Type">{job_type}</column>
    <column heading="Status">{job_status}</column>
    <button-group>
        <button label="Refresh Jobs" icon="{$: Icon('refresh')}" on-press="$:loadJobs()" validate="false" style="outline" />
    </button-group>
</object-table>

Example javascript:

    function init() {
        return refresh();
    }

    function refresh() {
        return loadJobs();
    }

    /**
     * async Loads all jobs from ADAS integration
     */
    function loadJobs() {
        return ADAS.Local.job.all().then(function (ADAS_jobs) {
            if (ADAS_jobs && ADAS_jobs.length) {
                view.jobs = [];
                var batch = new DB.Batch();
                for (var i = 0; i < ADAS_jobs.length; i++) {
                    //convert to Journey DB.job format
                    view.jobs[i] = ADAS_jobs[i].toJourney(batch);
                }
                batch.execute();
            } else {
                view.jobs = [];
            }
        });
    }

Where the function ADAS.Local.job.all() is a wrapper for a fetch request and returns a promise resolving in jobs.