Underscore.js Templating

<apex:page >
<apex:includeScript value="/soap/ajax/28.0/connection.js"/>
<apex:includeScript value="/soap/ajax/28.0/apex.js"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" ></script>


    <div id="tdiv" style="background-color:#87CEFA;border-radius:5px;width:300px;padding:15px;font-size:120%">
       <h1 style="font-size:150%; color:white">Underscore.js Templating</h1> <br/><br/>
    </div>

    <script type="text/template" class="template">

        <h2  style="color:white">
            <%- rc.listTitle %>
        </h2>

        <ul>
            <% _.each( rc.listItems, function( listItem ){ %>

                  <li onclick="window.open('/<%- listItem.Id %>')" style="cursor:pointer"> 

                    <%- listItem.Name %>

                    <% if ( listItem.Active__c == 'No' ){ %>
                    <span style="color:white">    <em>*</em> </span>
                    <% } %>

                </li>

            <% }); %>
        </ul>


        <% var showFootnote = _.any(
            _.pluck( rc.listItems, "Active__c" )
        ); %>


        <% if ( showFootnote ){ %>

            <p style="font-size: 12px ;color:white">

                <em>* Account inactive</em>

            </p>

        <% } %>

    </script>

    <script type="text/javascript">
       j$ = jQuery.noConflict();
       sforce.connection.sessionId = "{!$Api.Session_ID}";
       result = sforce.connection.query("Select Id, Name, Active__c from Account LIMIT 10");
       records = result.getArray("records");

        _.templateSettings.variable = "rc";

      
        var template = _.template(
            j$( "script.template" ).html()
        );

       
        var templateData = {
            listTitle: "Accounts active/inactive",
            listItems: records,
        };


        j$( "#tdiv" ).html(j$( "#tdiv" ).html()+
            template( templateData )
        );


    </script>

</apex:page>




Comments

Popular Posts