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>
<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
Post a Comment