Info

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

Preparation code

<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>
    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 {{AccountTitleClass}}">{{FormattedAccountName}}<small class="currency">{{BaseCurrency}}</small></h2><ul class="list group"><li><strong class="label">Cash Balance</strong><span class="value">{{{CashBalanceFormatted}}}</span></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Account value</strong><span class="value">{{{TotalValueFormatted}}}</span></div><div class="collapsible-content"><ul class="value-list"><li><strong>Cash Balance</strong>{{{CashBalanceFormatted}}}</li><li><strong>Non-margin positions</strong>{{{NonMarginPositionsValueFormatted}}}</li><li><strong>Unrealised margin profit/loss</strong>{{{UnrealizedMarginProfitLossFormatted}}}</li><li><strong>Cost to close</strong>{{{CostToClosePositionsFormatted}}}</li><li><strong>Transactions not booked</strong>{{{TransactionsNotBookedFormatted}}}</li></ul></div></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Margin available</strong><span class="value">{{{MarginAvailableForTradingFormatted}}}</span></div><div class="collapsible-content"><ul class="value-list"><li><strong>Account value</strong>{{{TotalValueFormatted}}}</li><li><strong>Other collateral</strong>{{{OtherCollateralFormatted}}}</li><li><strong>Not available as margin collateral</strong>{{{MarginCollateralNotAvailableFormatted}}}</li><li><strong>Used for margin requirements</strong>{{{MarginUsedByCurrentPositionsFormatted}}}</li><li><strong>Net exposure</strong>{{{MarginNetExposureFormatted}}}</li><li><strong>Exposure Coverage</strong>{{{MarginExposureCoveragePctFormatted}}}%</li></ul></div></li><li><strong class="label">Margin Utilisation</strong><div class="value">{{{MarginUtilizationPctWithMaxFormatted}}}%<span class="progress"><span class="progress-value" style="width:{{{MarginUtilizationPctWithMax}}}%"></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].AccountTitleClass()}}">{{=it.Accounts[i].FormattedAccountName()}}<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].CashBalanceFormatted()}}</span></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Account value</strong><span class="value">{{=it.Accounts[i].TotalValueFormatted()}}</span></div><div class="collapsible-content"><ul class="value-list"><li><strong>Cash Balance</strong>{{=it.Accounts[i].CashBalanceFormatted()}}</li><li><strong>Non-margin positions</strong>{{=it.Accounts[i].NonMarginPositionsValueFormatted()}}</li><li><strong>Unrealised margin profit/loss</strong>{{=it.Accounts[i].UnrealizedMarginProfitLossFormatted()}}</li><li><strong>Cost to close</strong>{{=it.Accounts[i].CostToClosePositionsFormatted()}}</li><li><strong>Transactions not booked</strong>{{=it.Accounts[i].TransactionsNotBookedFormatted()}}</li></ul></div></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Margin available</strong><span class="value">{{=it.Accounts[i].MarginAvailableForTradingFormatted()}}</span></div><div class="collapsible-content"><ul class="value-list"><li><strong>Account value</strong>{{=it.Accounts[i].TotalValueFormatted()}}</li><li><strong>Other collateral</strong>{{=it.Accounts[i].OtherCollateralFormatted()}}</li><li><strong>Not available as margin collateral</strong>{{=it.Accounts[i].MarginCollateralNotAvailableFormatted()}}</li><li><strong>Used for margin requirements</strong>{{=it.Accounts[i].MarginUsedByCurrentPositionsFormatted()}}</li><li><strong>Net exposure</strong>{{=it.Accounts[i].MarginNetExposureFormatted()}}</li><li><strong>Exposure Coverage</strong>{{=it.Accounts[i].MarginExposureCoveragePctFormatted()}}%</li></ul></div></li><li><strong class="label">Margin Utilisation</strong><div class="value">{{=it.Accounts[i].MarginUtilizationPctWithMaxFormatted()}}%<span class="progress"><span class="progress-value" style="width:{{=it.Accounts[i].MarginUtilizationPctWithMax()}}%"></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>"');
  var result = document.getElementById('result');
</script>
<style>#result {display:none;}</style>

<div id="result"></div>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

result.innerHTML = doTtemplate(sharedVariables);

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

result.innerHTML = '<div><h1 class="header">Header</h1><h2 class="header2">Header2</h2><h3 class="header3">Header3</h3><h4 class="header4">Header4</h4><h5 class="header5">Header5</h5><h6 class="header6">Header6</h6><ul class="list"><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li><li class="item">5</li><li class="item">6</li><li class="item">7</li><li class="item">8</li><li class="item">9</li><li class="item">10</li><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li><li class="item">5</li><li class="item">6</li><li class="item">7</li><li class="item">8</li><li class="item">9</li><li class="item">10</li><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li><li class="item">5</li><li class="item">6</li><li class="item">7</li><li class="item">8</li><li class="item">9</li><li class="item">10</li><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li><li class="item">5</li><li class="item">6</li><li class="item">7</li><li class="item">8</li><li class="item">9</li><li class="item">10</li><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li><li class="item">5</li><li class="item">6</li><li class="item">7</li><li class="item">8</li><li class="item">9</li><li class="item">10</li><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li><li class="item">5</li><li class="item">6</li><li class="item">7</li><li class="item">8</li><li class="item">9</li><li class="item">10</li></ul></div>'

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

• Revision 1: published by foo bar on 23rd November 2011
• Revision 3: published by pratap on 5th December 2011
• Revision 4: published by pratap on 5th December 2011
• Revision 5: published by Pratap on 5th December 2011
• Revision 7: published on 27th December 2011
• Revision 9: published on 27th December 2011
• Revision 10: published on 27th December 2011
• Revision 12: published on 12th January 2012
• Revision 15: published on 16th January 2012
• Revision 16: published by Laura Doktorova on 18th January 2012
• Revision 17: published on 19th January 2012
• Revision 18: published on 19th January 2012
• Revision 19: published on 20th January 2012
• Revision 21: published by meikidd on 18th April 2012
• Revision 22: published on 29th December 2012

0 comments