Skip to content

Instantly share code, notes, and snippets.

@ycatch
Last active March 17, 2018 15:44
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 ycatch/186eed0bf74c002a34f61b5dfee36662 to your computer and use it in GitHub Desktop.
Save ycatch/186eed0bf74c002a34f61b5dfee36662 to your computer and use it in GitHub Desktop.
Logic-less template engine https://mustache.github.io/
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>mustache.js | example</title>
<style>
body {
padding: 30px;
}
</style>
</head>
<body>
<div id="target">Loading...</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.0/mustache.min.js"></script>
<script type="text/x-handlebars-template" id="template">
<h1>{{title}}</h1>
<div>{{description}}</div>
<div>{{date}}</div>
</script>
<script>
$(function() {
var obj = {
title: "Hello World",
description: "吾輩は猫である。",
date: function() {
return new Date();
}
};
var template = $("#template").html();
var output = Mustache.render(template, obj);
$("#target").html(output);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment