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.