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?

score 2 · Accepted Answer · answered Dec 31 '13 at 18:41

2

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

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

answered Dec 31 '13 at 18:41

Alexandre Ardhuin

71,959
15
151
132

2

Ughhh so easy its stupid! Dart is probably the coolest language/platform/framework I've learned in a long time. – IAmYourFaja Dec 31 '13 at 18:42
2

One thing to note, is that assigning to the contents of another element from a markup will need to pass through a validator. The default one may modify your source in unexpected ways (eg: strip out inline style attributes). See https://api.dartlang.org/dart_html/NodeTreeSanitizer.html and https://api.dartlang.org/dart_html/NodeValidator.html for more info. – Matt B Dec 31 '13 at 18:49
Thanks @MattB (+1) - does this mean I need to implement my own NodeValidator so that nothing gets stripped out? Also, why would it even do such a thing? Thanks again! – IAmYourFaja Dec 31 '13 at 19:03
It does it because you're potentially loading untrusted markup which could try implementing a number of different attacks on your page/app. I can't say if you need to implement your own validator or not as I'm not sure what is contained in the tags you're loading. See this thread for why its implemented and different approaches for bypassing or more information: https://groups.google.com/a/dartlang.org/d/topic/misc/kQD2-_hY_DQ/discussion – Matt B Dec 31 '13 at 19:26

Dart: scope of querySelector

1 Answers1