MSDN Magazine - June 2008 - (Page 32)

} } builder = new Samples.MarkupBuilder(); builder.loadHeader($get("header")); builder.loadFooter($get("footer")); builder.loadItemTemplate($get("item")); You can embed HTML templates directly in the page using invisible DIVs. However, this only works if the markup in the block is well formed. A better option would be to embed templates as XML data islands, as shown here: #Symbol #Quote #Change As you can see, the template is a chunk of HTML that refers to binding fields using a custom notation. In this case, I’m using the #PropertyName expression to indicate the placeholder for a bound value. When data is available, you just invoke the bind method on the markup builder: function _getLiveQuotes() { Samples.WebServices.LiveQuoteService.Update(onDataAvailable); } function onDataAvailable(results) { var temp = builder.bind(results); $get("grid").innerHTML = temp; } Figure 7 New Page Using the Markup Builder Needless to say, the element named grid is the placeholder for the final output in this example. The MarkupBuilder class is based on the Microsoft AJAX Client Library. Its full source code is found in Figure 6. Internally, the markup builder uses a Sys.StringBuilder object to compose the HTML string. It first adds the header template (if any) and then proceeds to loop over the bound data. Finally, it adds the footer template. In this implementation, header and footer templates are not data-bound. (Figure 7 shows a page using the markup builder.) Is there any difference between specifying the template as a plain string or as an embedded DOM subtree or XML data island? From the markup builder’s perspective, it doesn’t really matter—all that it needs is a string to append to the string builder buffer. From the developer’s perspective, using DOM templates may be a better option because you can more easily validate your template and might also be able to download the template from a URL. Designed to work only with collections of data, the solution presented here follows the guidelines of other free frameworks for client-side templating. One of these frameworks that I would like to specifically mention is PrototypeJS. For more information, samples, and source code, refer to prototypejs.org/api/template. Is there anything that you can improve? Absolutely! Note that the code presented in this column implements the minimum set of features one would expect from a browser-side template and binding engine. As you can see in Figure 7, the current implementation does not have colored type to distinguish the prices of rising and fall32 msdn magazine ing stocks, as Figure 2 had. In the code of Figure 2, I handle the RowDataBound event of the GridView control and directly modify the style of involved cells: void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.Cells[2].Text.StartsWith("+")) e.Row.Cells[2].ForeColor = Color.Green; if (e.Row.Cells[2].Text.StartsWith("-")) e.Row.Cells[2].ForeColor = Color.Red; } Within a partial rendering solution, this styling happens on the server and therefore has the ability to leverage the rich program- Further Considerations The goal of the BST pattern is to separate the code that produces a view of the data from the data itself. ming model of server data-bound controls. In a client-side solution, you need a more sophisticated markup builder that accepts a function delegate that styles any piece of bound data before it is appended to the buffer. Another more important difference exists between the code that produced Figures 2 and 7 that doesn’t show up through the printed figures. To discover this difference, try running both pages and click on the other buttons you see (Weather Forecasts and Start Some Task). The page depicted in Figure 7 does not stop Cutting Edge http://www.prototypejs.org/api/template

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

MSDN Magazine - June 2008 Contents Toolbox CLR Inside Out Cutting Edge Patterns In Practice SAAS Concurrency Robotics Form Filler GUI Library Service Station Foundations Windows With C++ Concurrent Affairs Going Places { End Bracket }

MSDN Magazine - June 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.