JQuery integration

One of the cool features MS AJAX preview 6 introduces is better JQuery integration. From now on, MS AJAX components (which have been defined through a script info object registered through a defineScript(s) method call) are exposed as jQuery plugins. This means that you can write something like this:

<head runat="server">
  <style type="text/css">
      .sys-template{
          display:none;
      }
  </style>
  <script src="Scripts/MicrosoftAjax/start.debug.js" 
type="text/javascript">
</
script> <script type="text/javascript"> Sys.require([Sys.components.dataView,
Sys.scripts.jQuery]); var items = [ { name: "luis", address: "fx" }, { name: "john", address: "lx" }, { name: "rita", address: "fx" } ]; Sys.onReady(function () { $("#myDv").dataView({
data: items,
itemTemplate: "#template" }) .css("background-color", "lightgray"); }); </script> </head> <body> <div id="myDv"> </div> <div id="template" class="sys-template"> <div>{{name}}</div> </div> </body>

Pretty cool, right? Instead of using the traditional MS AJAX Sys.create helper methods, we’re using a JQuery object for wrapping the div so that we can attach it to a MS AJAX DataView control and set its background color.

Notice that the dataView method (added to the jQuery.fn object) is built on the fly when the JQuery script is listed on the depedencies list passed to the Sys.require method. This is one of those small details that makes life better for everyone…Stay tuned for more.

Advertisements

~ by Luis Abreu on October 26, 2009.

7 Responses to “JQuery integration”

  1. You can also just include jquery the way you normally do, FYI.

  2. You can also just include jquery the way you normally do, FYI.

  3. Yes, but I”m really lazy and Sys.require seems to require few key pushes…

  4. Yup — some people will probably prefer to do it the usual way, just wanted to point out it isn”t a requirement that you load jquery through the loader. It plays nice.

    This gives you a pretty easy way to load jquery dynamically along with your own scripts, fyi.. so start.js can be useful to you even if you don”t use the ms ajax framework proper.

  5. Agreed…

  6. If you are planning to implement the dataview as a component that contains several controls, ie. a dataGrid.

    by not using like Dave said the proper framework. Do we lose the ability to dispose of the component and all controls, behaviors and handlers that are contained with the component? or even they ability .find() the component?

    can you still do:

    myDV = $(“#myDv”).dataView({
    data: items,
    itemTemplate: “#template” })
    .css(“background-color”, “lightgray”);
    });

  7. I think that what Dave was saying is that even if you don”t want to use MS AJAX components, you can rely on start.js file for having on-demand loading of the script files you”re using.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: