Supporting multiple playgrounds on a single page

[tonygotskilz]

We are having issues implementing multiple playgrounds on a single page. It seems the creation of one swagger ui object is overwriting the other. If these basepaths of the two playgrounds are different this causes them to fail on try it since only one basebath is being properly recorded.
*note we are using window.swaggerUi[index].api.setBasePath(), which works for one playground but in this scenario is failing due to improper instantiation of the swaggerUI object.

I have tried several different methods of creating multiple swaggerUI objects but each ends up with the same issue. Something is overwriting params of the initially created object.

Examples:

(Below runs x number of times depending on how many playgrounds should be rendered)

window.swaggerUi = new SwaggerUi ({
 ... param settings
});
window.swaggerUi.load();

^ This creates the expected object but then gets overridden by the next past through

Tried:

window.swaggerUi = [];
window.swaggerUi[index] = new SwaggerUi ({
 ... param settings
});
window.swaggerUi[index].load();

^ this resulted in multiple objects being created initially but by the time the playground rendered only one of the objects seems to exist. I checked this by putting a console.log(window.swaggerUi[index]) inside the onComplete function. This console.log comes back as follows:

As you can see the object is undefined on the first passthrough, but I don't understand how this is possible since the console.log is located in the objects onComplete function. If the object doesn't exist what is getting complete?

This could be a fault with my logic so I tried to include as much information as possible. Please let me know if you need more information or if a call / webex could help clarify this as this is a blocking issue for us. Thank you in advance.

[shockey]

Closing, this was covered more recently in #3372.