LA.NET [EN]

Oct 17

In this post, we’ll be talking about the new Sys.get helper introduced by preview 6 of MS AJAX. Currently, the method can be used for getting a reference to a DOM element or a MS AJAX component and it exposes the following signature:

function get(selector, context)

The method expects two parameters (the second is optional):

  • selector: generally, you’ll pass a string which identifies the element you want;
  • context: used for limiting the search to a specific context. All contexts should expose a get method which can be used for getting the element;

Before going on, it’s important to keep in mind that this method will always return a reference to a single element (or null, if it can’t find at least one element that satisfies the passed criteria)!

For now, we’ll ignore the context parameter and will simply concentrate in the selector parameter. The passed in string can be in one of the following forms:

  • $something: tries to get a reference to the component named something;
  • #something: tries to get a reference to the DOM element with the ID something;
  • .something: returns the first DOM element with the class something;
  • something: returns the first DOM node named something (ie, it returns a reference for the first <something> found in the current context.

You may be thinking that this is a rather limited, especially if you compare it with, say, JQuery. Well,there are good news here! If you’re a JQuery fan,then you’ll be pleased to know that if you’ve loaded it then the Sys.get method will delegate the call in the jQuery method if the passed selector doesn’t match any of the rules presented in the previous list (for instance, passing something like “div span” ends up using JQuery if it has also been loaded in the page). I hate to repeat myself, but it’s important to recall that, even in this case, you’ll only get a reference to the first DOM node that satisfies that selector.

One additional note before seeing an example: if selector isn’t a string, it will be automatically returned from the Sys.get method invocation. Ok, lets see s really simple example:

<body xlmns:sys="javascript:Sys"
      xmlns:dv="javascript:Sys.UI.DataView">
    <ul id="dv" class="sys-template"
        sys:attach="dv"
        dv:data="{{items}}">
        <li>{{name}} - <span class="test">{{address}}</span></li>
    </ul>
    <input type="button" id="bt" value="get info" />
</body>
<script type="text/javascript">
    var items = [
        { name: "luis", address: "fx" },
        { name: "john", address: "london" },
        { name: "rita", address: "lx" }
    ];

    Sys.require([Sys.scripts.Templates, Sys.scripts.jQuery]);

    function pageLoad() {
        $addHandler(
            Sys.get("#bt"), //select by ID
            "click",
            function() {
                alert("component with ID dv: " + 
Sys.get("$dv").get_selectedIndex()); alert("first DOM with css class: " +
Sys.get(".test").innerHTML); alert("first tagname: " +
Sys.get("li").innerHTML); alert("jquery returns first node: " +
Sys.get("li span").innerHTML); }); } </script>

The previous snippet illustrates several selector options:

  • the reference to the DOM element used by the $addHandler method is obtained through the DOM ID selector (#);
  • getting a component is really simple: we just need to indicate that through the $ symbol;
  • getting the first element with a specific CSS class name depends on starting the selector string with a dot (.);
  • since we’ve also loaded jquery (note the Sys.require call), we can also use more complex expressions. However, don’t forget that even though the expression might result in a JQuery object which wraps several DOM nodes, the Sys.get method will only return a single DOM element (the first one).

You’re probably expecting me to talk about that second parameter (context), but I’ll have to leave it for a future post because we still haven’t discussed how the DataView control uses contexts internally for rendering items (we’ve mentioned it when we started talking about templates and declarative/imperative approaches, but we still to discuss it more thoroughly for things to make sense).

Stay tuned for more in MS AJAX.

3 comments so far

  1. william apken
    1:47 pm - 10-17-2009

    “BLOCKED SCRIPTSys”

    what does the BLOCKED SCRIPT mean and what is its function?

    Do you have a reference that can be read to find out more about this feature?

    Thank You

  2. luisabreu
    2:05 pm - 10-17-2009

    oops…sorry about that. That”s community serving escaping the javascript :Sys namespace

  3. william apken
    3:04 pm - 10-18-2009

    Thanks. I thought I had missed something. Only being doing .js for about 8 months. I still find days I learn something about the language I had no idea it existed.

    You have become my number 1 source of MS AJAX. Keep up the great work.

    I follow about 7 blogs from people who are supporting MS AJAX.
    There are not many people commenting on the blogs, I view MS AJAX as the future of Web Sites/Applications.

    Why such a small following? Am I wrong in thinking that total client side code can be implemented wide spread. And be able to give the user a web environment that they have never seen before.

    With AdoNet DataServices and the AdoNetDataContext has basically removed all DB interaction (code I have to write). Who would not want to interact with a DB (or any source) this way.

    Sorry so long and again keep up the great work,

    William Apken

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>