Info

Appending HTML to the page with doT, Mustache and native Javascript

linked RenderJS to the latest version on master.

Preparation code

<script src="http://code.jquery.com/jquery-1.4.3.min.js">
</script>
<script src="http://github.com/aefxx/jQote2/raw/69b2053a13f5f180e696de9b3dba856a3c00678c/jquery.jqote2.js">
</script>
<script src="http://github.com/janl/mustache.js/raw/master/mustache.js">
</script>
<script src="https://github.com/olado/doT/raw/master/doT.js">
</script>
<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js">
</script>
<script src="http://sstephenson.github.com/eco/dist/eco.js">
</script>
<script src="https://raw.github.com/BorisMoore/jsrender/master/jsrender.js" ></script>
<script>
  window.sharedVariables = {
    "Accounts": [{
      "id": "XNKN_2147042265",
      "AccountId": "XNKN_2147042265",
      "BaseCurrency": "USD",
      "BaseCurrencyDecimals": 2,
      "LegalInstruments": 460031,
      "CashBalance": 10054873.73,
      "NonMarginPositionsValue": 0,
      "UnrealizedMarginProfitLoss": 139392.38,
      "CostToClosePositions": 0,
      "MarginAvailableForTrading": 10115221.041784238,
      "TransactionsNotBooked": 0,
      "TotalValue": 10194266.110000001,
      "OtherCollateral": 100000,
      "MarginCollateralNotAvailable": 0,
      "MarginUsedByCurrentPositions": -179045.06821576256,
      "MarginNetExposure": 4476126.705390137,
      "MarginExposureCoveragePct": 229.98156190716585,
      "MarginUtilizationPct": 1.7392698644329347
    }]
  };

  window.mustacheTemplate = '{{#Accounts}}<h2 class="title">{{AccountId}}<small class="currency">{{BaseCurrency}}</small></h2><ul class="list group"><li><strong class="label">Cash Balance</strong><span class="value">{{{CashBalance}}}</span></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Account value</strong><span class="value">{{{TotalValue}}}</span></div><div class="collapsible-content"><ul class="value-list"><li><strong>Cash Balance</strong>{{{CashBalance}}}</li><li><strong>Non-margin positions</strong>{{{NonMarginPositionsValue}}}</li><li><strong>Unrealised margin profit/loss</strong>{{{UnrealizedMarginProfitLoss}}}</li><li><strong>Cost to close</strong>{{{CostToClosePositions}}}</li><li><strong>Transactions not booked</strong>{{{TransactionsNotBooked}}}</li></ul></div></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Margin available</strong><span class="value">{{{MarginAvailableForTrading}}}</span></div><div class="collapsible-content"><ul class="value-list"><li><strong>Account value</strong>{{{TotalValue}}}</li><li><strong>Other collateral</strong>{{{OtherCollateral}}}</li><li><strong>Not available as margin collateral</strong>{{{MarginCollateralNotAvailable}}}</li><li><strong>Used for margin requirements</strong>{{{MarginUsedByCurrentPositions}}}</li><li><strong>Net exposure</strong>{{{MarginNetExposure}}}</li><li><strong>Exposure Coverage</strong>{{{MarginExposureCoveragePct}}}%</li></ul></div></li><li><strong class="label">Margin Utilisation</strong><div class="value">{{{MarginUtilizationPct}}}%<span class="progress"><span class="progress-value" style="width:{{{MarginUtilizationPct}}}%"></span></span></div></li></ul>{{/Accounts}}        <ul class="list link-list group"><li><a href="#/orders/">Open Orders</a></li><li><a href="#/positions/">Open Positions</a></li></ul>        <p class="timestamp">Last updated: <span id="AccUpd">-</span>&nbsp;<button class="btn refresh"><span class="icon icon-refresh"></span></button></p>';

  window.doTtemplate = doT.template('{{ for (var i = 0, l = it.Accounts.length; i < l; i++) { }}<h2 class="title">{{=it.Accounts[i].AccountId}}<small class="currency">{{=it.Accounts[i].BaseCurrency}}</small></h2><ul class="list group"><li><strong class="label">Cash Balance</strong><span class="value">{{=it.Accounts[i].CashBalance}}</span></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Account value</strong><span class="value">{{=it.Accounts[i].TotalValue}}</span></div><div class="collapsible-content"><ul class="value-list"><li><strong>Cash Balance</strong>{{=it.Accounts[i].CashBalance}}</li><li><strong>Non-margin positions</strong>{{=it.Accounts[i].NonMarginPositionsValue}}</li><li><strong>Unrealised margin profit/loss</strong>{{=it.Accounts[i].UnrealizedMarginProfitLoss}}</li><li><strong>Cost to close</strong>{{=it.Accounts[i].CostToClosePositions}}</li><li><strong>Transactions not booked</strong>{{=it.Accounts[i].TransactionsNotBooked}}</li></ul></div></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Margin available</strong><span class="value">{{=it.Accounts[i].MarginAvailableForTrading}}</span></div><div class="collapsible-content"><ul class="value-list"><li><strong>Account value</strong>{{=it.Accounts[i].TotalValue}}</li><li><strong>Other collateral</strong>{{=it.Accounts[i].OtherCollateral}}</li><li><strong>Not available as margin collateral</strong>{{=it.Accounts[i].MarginCollateralNotAvailable}}</li><li><strong>Used for margin requirements</strong>{{=it.Accounts[i].MarginUsedByCurrentPositions}}</li><li><strong>Net exposure</strong>{{=it.Accounts[i].MarginNetExposure}}</li><li><strong>Exposure Coverage</strong>{{=it.Accounts[i].MarginExposureCoveragePct}}%</li></ul></div></li><li><strong class="label">Margin Utilisation</strong><div class="value">{{=it.Accounts[i].MarginUtilizationPct}}%<span class="progress"><span class="progress-value" style="width:{{=it.Accounts[i].MarginUtilizationPct}}%"></span></span></div></li></ul>{{ } }}        <ul class="list link-list group"><li><a href="#/orders/">Open Orders</a></li><li><a href="#/positions/">Open Positions</a></li></ul>        <p class="timestamp">Last updated: <span id="AccUpd">-</span>&nbsp;<button class="btn refresh"><span class="icon icon-refresh"></span></button></p>');


  window.ecoTemplate = eco('<% for acc in @Accounts: %><h2 class="title"><%-acc.AccountId%><small class="currency"><%=acc.BaseCurrency%></small></h2><ul class="list group"><li><strong class="label">Cash Balance</strong><small class="value"><%-acc.CashBalance%></small></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Account value</strong><small class="value"><%-acc.TotalValue%></small></div><div class="collapsible-content"><ul class="value-list"><li><strong>Cash Balance</strong><%-acc.CashBalance%></li><li><strong>Non-margin positions</strong><%-acc.NonMarginPositionsValue%></li><li><strong>Unrealised margin profit/loss</strong><%-acc.UnrealizedMarginProfitLoss%></li><li><strong>Cost to close</strong><%-acc.CostToClosePositions%></li><li><strong>Transactions not booked</strong><%-acc.TransactionsNotBooked%></li></ul></div></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Margin available</strong><small class="value"><%-acc.MarginAvailableForTrading%></small></div><div class="collapsible-content"><ul class="value-list"><li><strong>Account value</strong><%-acc.TotalValue%></li><li><strong>Other collateral</strong><%-acc.OtherCollateral%></li><li><strong>Not available as margin collateral</strong><%-acc.MarginCollateralNotAvailable%></li><li><strong>Used for margin requirements</strong><%-acc.MarginUsedByCurrentPositions%></li><li><strong>Net exposure</strong><%-acc.MarginNetExposure%></li><li><strong>Exposure Coverage</strong><%-acc.MarginExposureCoveragePct%>%</li></ul></div></li><li><strong class="label">Margin Utilisation</strong><div class="value"><%-acc.MarginUtilizationPct%>%<span class="progress"><span class="progress-value" style="width:<%-acc.MarginUtilizationPct%>%"></span></span></div></li></ul><% end %>        <ul class="list link-list group"><li><a href="#/orders/">Open Orders</a></li><li><a href="#/positions/">Open Positions</a></li></ul>        <p class="timestamp">Last updated: <span id="AccUpd">-</span>&nbsp;<button class="btn refresh"><span class="icon icon-refresh"></span></button></p>');

  window.jqote2Template = $.jqotec('<% for (var i = 0, l = this.Accounts.length; i < l; i++) {        var acc=this.Accounts[i];         %><h2 class="title"><%=acc.AccountId %><small class="currency"><%=acc.BaseCurrency%></small></h2><ul class="list group"><li><strong class="label">Cash Balance</strong><small class="value"><%=acc.CashBalance%></small></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Account value</strong><small class="value"><%=acc.TotalValue%></small></div><div class="collapsible-content"><ul class="value-list"><li><strong>Cash Balance</strong><%=acc.CashBalance%></li><li><strong>Non-margin positions</strong><%=acc.NonMarginPositionsValue%></li><li><strong>Unrealised margin profit/loss</strong><%=acc.UnrealizedMarginProfitLoss%></li><li><strong>Cost to close</strong><%=acc.CostToClosePositions%></li><li><strong>Transactions not booked</strong><%=acc.TransactionsNotBooked%></li></ul></div></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Margin available</strong><small class="value"><%=acc.MarginAvailableForTrading%></small></div><div class="collapsible-content"><ul class="value-list"><li><strong>Account value</strong><%=acc.TotalValue%></li><li><strong>Other collateral</strong><%=acc.OtherCollateral%></li><li><strong>Not available as margin collateral</strong><%=acc.MarginCollateralNotAvailable%></li><li><strong>Used for margin requirements</strong><%=acc.MarginUsedByCurrentPositions%></li><li><strong>Net exposure</strong><%=acc.MarginNetExposure%></li><li><strong>Exposure Coverage</strong><%=acc.MarginExposureCoveragePct%>%</li></ul></div></li><li><strong class="label">Margin Utilisation</strong><div class="value"><%=acc.MarginUtilizationPctWithMax%>%<span class="progress"><span class="progress-value" style="width:<%=acc.MarginUtilizationPct%>%"></span></span></div></li></ul><% } %>        <ul class="list link-list group"><li><a href="#/orders/">Open Orders</a></li><li><a href="#/positions/">Open Positions</a></li></ul>        <p class="timestamp">Last updated: <span id="AccUpd">-</span>&nbsp;<button class="btn refresh"><span class="icon icon-refresh"></span></button></p>');

  window.jsRenderTemplate = $.template('{{#each Accounts}}<h2 class="title">{{=AccountId}}<small class="currency">{{=BaseCurrency}}</small></h2><ul class="list group"><li><strong class="label">Cash Balance</strong><span class="value">{{=CashBalance}}</span></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Account value</strong><span class="value">{{=TotalValue}}</span></div><div class="collapsible-content"><ul class="value-list"><li><strong>Cash Balance</strong>{{=CashBalance}}</li><li><strong>Non-margin positions</strong>{{=NonMarginPositionsValue}}</li><li><strong>Unrealised margin profit/loss</strong>{{=UnrealizedMarginProfitLoss}}</li><li><strong>Cost to close</strong>{{=CostToClosePositions}}</li><li><strong>Transactions not booked</strong>{{=TransactionsNotBooked}}</li></ul></div></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Margin available</strong><span class="value">{{=MarginAvailableForTrading}}</span></div><div class="collapsible-content"><ul class="value-list"><li><strong>Account value</strong>{{=TotalValue}}</li><li><strong>Other collateral</strong>{{=OtherCollateral}}</li><li><strong>Not available as margin collateral</strong>{{=MarginCollateralNotAvailable}}</li><li><strong>Used for margin requirements</strong>{{=MarginUsedByCurrentPositions}}</li><li><strong>Net exposure</strong>{{=MarginNetExposure}}</li><li><strong>Exposure Coverage</strong>{{=MarginExposureCoveragePct}}%</li></ul></div></li><li><strong class="label">Margin Utilisation</strong><div class="value">{{=MarginUtilizationPct}}%<span class="progress"><span class="progress-value" style="width:{{=MarginUtilizationPct}}%"></span></span></div></li></ul>{{/each}}        <ul class="list link-list group"><li><a href="#/orders/">Open Orders</a></li><li><a href="#/positions/">Open Positions</a></li></ul>        <p class="timestamp">Last updated: <span id="AccUpd">-</span>&nbsp;<button class="btn refresh"><span class="icon icon-refresh"></span></button></p>');

  var result = document.getElementById('result');
</script>
<style>
  #result {display:none;}
</style>
<div id="result">
</div>

Preparation code output

Test runner

Ready to run.

result.innerHTML = doTtemplate(sharedVariables);

result.innerHTML = Mustache.to_html(mustacheTemplate, sharedVariables);

result.innerHTML = $.jqote(jqote2Template, sharedVariables)

result.innerHTML = ecoTemplate(sharedVariables);

result.innerHTML = $.render(sharedVariables, jsRenderTemplate);