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 to
view-2.html`. How can I do this?
You can inject the html
in a div
and search inside it :
DivElement div = new DivElement();
div.innerHtml = html;
ButtonElement redButton = div.querySelector("#redButton");