Underscore & D3 templating

by Igor Cuckovic

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>


    <h1>
        Looking At Underscore.js Templates
    </h1>
  <div id="main"> here goes rendered template</div>   
<svg></svg>
 
    <!-- BEGIN: Underscore Template Definition. -->
    <script type="text/template" class="template">
       
        <h2>
            <%- rc.listTitle %>
        </h2>
        
            <h3> <%- rc.somethingCompletlyDifferent %> </h3>    
                
          <% var winsSordted = _(rc.listItems).sortBy(function(obj) { 
                return -obj.wins //  - "minus" sorts it by biggest first
                });
                //console.log(pobjedeSordted); %>      

        <ul>
            <% _.each( winsSordted, function( listItem ){ %>
 
                <li>
 
                    <%- listItem.name %> has <%- listItem.wins %> wins
 
                    <% if ( listItem.hasOlympicGold ){ %>
                        <em>*</em>
                    <% } %>
 
                </li>
 
            <% }); %>
        </ul>
 
 
        <% var showFootnote = _.any(
            _.pluck( rc.listItems, "hasOlympicGold" )
        ); %>
 
 
        <% if ( showFootnote ){ %>
 
            <p style="font-size: 12px ;">
 
                <em>* Olympic gold medalist</em>
 
            </p>
 
        <% } %>
 
    </script>
    <!-- END: Underscore Template Definition. -->

JavaScript

// When rending an underscore template, we want top-level
        // variables to be referenced as part of an object. For
        // technical reasons (scope-chain search), this speeds up
        // rendering; however, more importantly, this also allows our
        // templates to look / feel more like our server-side
        // templates that use the rc (Request Context / Colletion) in
        // order to render their markup.
        _.templateSettings.variable = "rc";
 
        // Grab the HTML out of our template tag and pre-compile it.
        var template = _.template(
            d3.select( "script.template" ).html()
        );
 
        // Define our render data (to be put into the "rc" variable).
        var templateData = {
            listTitle: "Olympic Volleyball Players",
            somethingCompletlyDifferent: "Spanish inquisition!",
            listItems: [
                {
                    name: "Misty May-Treanor",
                    hasOlympicGold: true,
                    wins: 125
                },
                {
                    name: "Kerri Walsh Jennings",
                    hasOlympicGold: true,
                    wins: 156
                },
                {
                    name: "Jennifer Kessy",
                    hasOlympicGold: false,
                    wins: 55
                },
                {
                    name: "April Ross",
                    hasOlympicGold: false,
                    wins: 66
                   
                }
            ]
        };

// sorting wins
// sorts by biggest first

var pobjedeSordted = _(templateData.listItems).sortBy(function(obj) { return -obj.wins });
//console.log(pobjedeSordted);

 
// Render the underscore template and inject it inside #main div
// in our current DOM.
       d3.select("#main").html(
           template( templateData )
        );

////////////////////////////////////////////
// D3 stuff
////////////////////////////////////////////

var margin...