MSDN Magazine - July 2008 - (Page 52)

Figure 2 Get Templates function pageLoad() { if (builder === null) { builder = new Samples.MarkupBuilder(); builder.loadHeader($get("header")); builder.loadFooter($get("footer")); builder.loadItemTemplate($get("item")); } } function getLiveQuotes() { Samples.WebServices.LiveQuoteService.Update(onDataAvailable); } function onDataAvailable(results) { var temp = builder.bind(results); $get("grid").innerHTML = temp; } of a public property on the bound object. The second argument is the entire data item object being bound to the current instance of the template. The availability of the entire data object makes it possible for you to fully check runtime conditions to determine variations on the markup. Designed in this way, the callback function is logically equivalent to the server-side DataBound event of ASP.NET server controls. The following code snippet shows the JavaScript code required to change the color of the quote based on the rise or fall of the stock price: function applyFormatting(memberName, dataItem) { var temp = dataItem[memberName]; if (memberName == "Change" && x.charAt(0) == "+") { return " " + temp + " "; } if (memberName == "Change" && x.charAt(0) == "-") { return " " + temp + " "; } return temp; } In last month’s source code, I created a JavaScript class that takes three HTML templates as input, iterates them over a collection of data, and returns the resulting HTML text. The JavaScript code in Figure 2 shows the essence of this code. HTML templates can either be defined as an HTML string or loaded from XML data islands interspersed in the page: #Symbol #Quote #Change Enhanced BST Implementation The logic in the code is applied only when the callback is invoked for the #Change placeholder. The callback just returns the raw member value if invoked for a different member. Figure 4 shows the final effect in the page. You’re probably wondering how some cells in Figure 4 have a different background color. Well, I presented the aforementioned callback as a data-binding function, but in reality, the callback is invoked for each match found in the item template with the #xxx Figure 3 MarkupBuilder Class function Samples$MarkupBuilder$_generate(data, itemCallback) { var pattern = /#\w+/g; // Finds all #word occurrences var _builder = new Sys.StringBuilder(this._header); for(i=0; i<data.length; i++) { var dataItem = data[i]; var template = this._itemTemplate; var matches = template.match(pattern); for (j=0; j<matches.length; j++) { var text = matches[j]; var memberName = text.slice(1); //Invoke a callback to further modify data to be bound var memberData = dataItem[memberName]; var temp = memberData; if (itemCallback !== undefined) { temp = itemCallback(memberName, dataItem); } template = template.replace(matches[j], temp); The arbitrary syntax in the HTML template allows you to find placeholders for the data-bound items. In the sample code included here, #Quote represents the value of the property Quote in the bound data item object. There are a few ways to improve this code and make it more useful. An essential improvement would be the ability to style items individually. So suppose that the data downloaded to the client represents the current quote and price change of a number of stocks. In this case, you might want to render in green any stocks on the rise and in red those stocks that are on a downswing. For this to happen, though, you need to inject some logic into the rendering process. Figure 3 shows an excerpt from the Samples.MarkupBuilder class used to bind a collection of stock data to a few HTML existing templates (the full code is available in this month’s download). The heart of the MarkupBuilder class is the _generate method, which is in charge of merging templates with data. In Figure 3, the _generate method takes two arguments: data and callback. In the code I presented last month, the same method takes only the data argument. As a client developer, you also specify a JavaScript function that the builder class will call back while processing the template for a given item. The callback function is expected to have the following prototype: function applyFormatting(memberName, dataItem) } } _builder.append(template); _builder.append(this._footer); // Return the markup var markup = _builder.toString(); return markup; The first argument is the name of the placeholder without the initial # symbol. In most cases, this first argument matches the name 52 msdn magazine } Cutting Edge

Table of Contents Feed for the Digital Edition of MSDN Magazine - July 2008

MSDN Magazine - July 2008 Contents Toolbox CLR Inside Out Flex Your Data Data Points Advanced Basics Office Space Cutting Edge Data Services ADO.NET Data and WPF Transactions WCF P2P Test Run Security Briefs Foundations .NET Matters {End Bracket}

MSDN Magazine - July 2008

For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.