Curious question here...
I am constructing my in-memory DOM and relying heavily on promises. Let's say I have this snippet inside a loop:
target = document.createDocumentFragment();
promises = [], pass, skip, store;
for (i = 0; i < foo; i += 1) {
element = foo[i];
// set promise
promises[i] = app.setContent(element, {}, update)
.then(function(response) {
// HELP!
if (pass) {
target.appendChild(store)
store = undefined;
skip = undefined;
pass = undefined;
}
if (response.tagName !== undefined) {
pass = true;
}
if (skip === undefined && response.tagName === undefined) {
store = response;
skip = true;
} else {
target.appendChild(response);
}
});
RSVP.all(promises).then(continue...
This particular loop operates 3x returning two div tags and a documentFragment. Previously without promises, the structure looked like:
<div toolbar>
<fragment = form>
<div toolbar>
The issue arises when converting to async, where the order of appending items is no longer predictable. This leads to convoluted workarounds like the one shown above with setting flags and conditions for sequential appendages - not exactly efficient or elegant.
Question:
Is there a more streamlined way to dictate the order of async returned items in a universal manner? If not, how can items be rearranged efficiently? Utilizing methods like querySelector/qsAll would provide some flexibility, but are there any other suggestions?
(And let's avoid the suggestion of placing content in the actual DOM just to reorder it :-) )
Thank you!