<div class="title">{{Title}}</div> <div class="overview"> <img src="{{ImageUrl}}" alt="{{Title}}" /> <p> <strong>Current Price: </strong> <span class="current-bid">{{CurrentPrice}}</span> </p> </div> <h3>Description</h3> <div class="description"> {{Description}} </div>
Notice how the markup of the client template looks almost identical to the final output. In fact, the only difference is that the client template has data placeholders instead of actual data. Also note that this is a very simple example to show the fundamental concept of client templatingâ&#x20AC;&#x201D;most client template libraries offer far more functionality than simple placeholders. The second step is to compile the client template, or convert the client template HTML into an executable JavaScript function. Since compiling the template is often the most expensive operation in the process, itâ&#x20AC;&#x2122;s often a good idea to compile it once and save the compiled function in a variable. This way, you can execute the compiled template multiple times while only performing the compilation once.
Finally, we invoke the compiled template by passing it the data that we wish to convert into HTML. The compiled template then returns formatted HTML, which we can insert into the DOM wherever we like. Take a look at Example 6-3 for an end-to-end example of a page that leverages client templates. Example 6-3. A complete client template example @model IEnumerable<Auction> <h2>Auctions</h2> <ul class="auctions"> @foreach(var auction in Model) { <li class="auction" data-key="@auction.Key"> <a href="#"> <img src="@auction.ThumbnailUrl" /> <span>@auction.Title</span> </a> </li>
JavaScript Rendering | 121
www.it-ebooks.info