Skip to content

Instantly share code, notes, and snippets.

@mtvbrianking

mtvbrianking/dustjs-demo.html

Last active August 3, 2018 20:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mtvbrianking/44f4c2af49db28035fee7571082ba36c to your computer and use it in GitHub Desktop.
Save mtvbrianking/44f4c2af49db28035fee7571082ba36c to your computer and use it in GitHub Desktop.
Download ZIP
DustJS demo
Raw
dustjs-demo.html
<!DOCTYPE html>
<html>
<head>
<title>DustJS</title>
<!-- http://www.dustjs.com/docs/api/ -->
<!-- http://www.dustjs.com/guides/rendering/ -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
margin: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<form>
<div class="form-group">
<label for="continents">Continents</label>
<select class="form-control" id="continents">
<option selected disabled>Select continent...</option>
<option>Africa</option>
<option>Antarctica</option>
<option>Asia</option>
<option>Australia</option>
<option>Europe</option>
<option>North America</option>
<option>South America</option>
</select>
</div>
</form>
</div>
<div class="row">
<h4 id="content"></h4>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dustjs-linkedin/2.7.5/dust-full.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dustjs-helpers/1.7.4/dust-helpers.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/dust" id="tpl">
Choose: {continent}!
</script>
<script type="text/javascript">
var tpl_src = $('#tpl').html();
// Compile the template under the name 'tpl'
var tpl_compiled = dust.compile(tpl_src, 'tpl');
// Register the template with Dust
dust.loadSource(tpl_compiled);
$('select[id=continents]').on('change', function() {
// Using jQuery ----------------------
// $('h4#content').html($(this).val());
// Using dustjs ----------------------
// Render the template
dust.render('tpl', { continent: $(this).val() }, function(err, out) {
if(err) {
console.log(err);
return;
}
// `out` contains the rendered output.
$('h4#content').html(out);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment