Dart: scope of querySelector

Question

I have a situation where I have 2 "views" (screens/pages) in my Dart web app, and I would like to asynchronously fetch the HTML for View #2 and then bind it to Dart DOM elements while the user is still viewing View #1. This way, when the user clicks a button on View #1, that will redirect them to View #2, all the HTML, code, etc. is all ready to go and the app can instantly display View #2 for them (so they don't have to wait for a page to load, etc.).

To get View #2's HTML, I figure I need something like:

class View2 extends AbstractView {
    ButtonElement redButton;
    ButtonElement blueButton;

    // constructors, getters/setters, click handlers for the buttons, etc.

    // Ex: here url might be: "http://example.com/myapp/view-2.html".
    void fetchAndBindUI(String url) {
        HttpRequest.getString("view-2.html").then((html) {
            // HERE'S THE PROBLEM:
            // How to associate querySelector with "html" instead of what's
            // currently inside the window.document (browser DOM)?
            redButton = querySelector("#redButton") as ButtonElement;
            blueButton = querySelector("#blueButton") as ButtonElement;
        });
    }
}

In the code above, when I execute querySelector("#redButton") as ButtonElement, since View #1 is currently "loaded" into the window.document, it will try to find an element in View #1 called redButton. Instead, I need it to search for "redButton" inside the HTML returned by the HTTP GET toview-2.html`. How can I do this?

Answer 1

You can inject the html in a div and search inside it :

DivElement div = new DivElement();
div.innerHtml = html;
ButtonElement redButton = div.querySelector("#redButton");