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":"summary","AccountId":null,"BaseCurrency":"USD","BaseCurrencyDecimals":2,"LegalInstruments":523519,"CashBalance":13343836.67,"NonMarginPositionsValue":0,"UnrealizedMarginProfitLoss":115048.29,"CostToClosePositions":0,"MarginAvailableForTrading":14237066.13307684,"TransactionsNotBooked":0,"TotalValue":13458884.959999999,"OtherCollateral":966090.12,"MarginCollateralNotAvailable":0,"MarginUsedByCurrentPositions":-
187908.94692316218,"MarginNetExposure":4564736.869224121,"MarginExposureCoveragePct":316.008906827785,"MarginUtilizationPct":1.302663927535618},
{"id":"TRIAL_2147042265","AccountId":"TRIAL_2147042265","BaseCurrency":"EUR","BaseCurrencyDecimals":2,"LegalInstruments":523519
,"CashBalance":119397835.44,"NonMarginPositionsValue":0,"UnrealizedMarginProfitLoss":-587463.82,"CostToClosePositions":-9.7,"MarginAvailableForTrading":117118132.90891154,"TransactionsNotBooked":0,"TotalValue":118810361.92,"OtherCollateral":0,"MarginCollateralNotAvailable":0,"MarginUsedByCurrentPositions":-
1692229.011088445,"MarginNetExposure":40655894.521386,"MarginExposureCoveragePct":292.2340372009349,"MarginUtilizationPct":1.4243109639106175},{"id":"NEW_XNKN","AccountId":"NEW_XNKN","BaseCurrency":"EUR","BaseCurrencyDecimals":2,"LegalInstruments":523519,"CashBalance":2442832.59,"NonMarginPositionsValue":0,"UnrealizedMarginProfitLoss":9264.1,"CostToClosePositions":0,"MarginAvailableForTrading":3050928.77324621,"TransactionsNotBooked":0,"TotalValue":2452096.69,"OtherCollateral":645440,"MarginCollateralNotAvailable":0,"MarginUsedByCurrentPositions":-
46607.91675379001,"MarginNetExposure":1066093.2040279,"MarginExposureCoveragePct":290.5502706796109,"MarginUtilizationPct":1.5046768260811143},{"id":"NIGAM_2147042265","AccountId":"NIGAM_2147042265","BaseCurrency":"JPY","BaseCurrencyDecimals":0,"LegalInstruments":523519
,"CashBalance":859620.43,"NonMarginPositionsValue":0,"UnrealizedMarginProfitLoss":-2862352.12,"CostToClosePositions":0,"MarginAvailableForTrading":-6187925.5732,"TransactionsNotBooked":0,"TotalValue":-
2002731.69,"OtherCollateral":0,"MarginCollateralNotAvailable":0,"MarginUsedByCurrentPositions":-
4185193.8832,"MarginNetExposure":104629847.08,"MarginExposureCoveragePct":-1.9141112654677885,"MarginUtilizationPct":9999},
{"id":"NITIN_2147042265","AccountId":"NITIN_2147042265","BaseCurrency":"EUR","BaseCurrencyDecimals":2,"LegalInstruments":523519
,"CashBalance":1111110631.64,"NonMarginPositionsValue":0,"UnrealizedMarginProfitLoss":-
92.41,"CostToClosePositions":0,"MarginAvailableForTrading":1111096570.15,"TransactionsNotBooked":0,"TotalValue":1111110539.23,"OtherCollateral":0,"MarginCollateralNotAvailable":0,"MarginUsedByCurrentPositions":-13969.08,"MarginNetExposure":349227,"MarginExposureCoveragePct":318162.83942249604,"MarginUtilizationPct":0.0012572178470812254},
{"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