node-json2html
Version:
json2html - HTML templating in pure javascript
106 lines (78 loc) • 4.52 kB
HTML
<html>
<head>
<title>json2html - Refresh Triggers</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- json2html -->
<script src="../json2html.js"></script>
</head>
<body>
<div class="px-6 py-24 sm:px-6 sm:py-32 lg:px-8">
<!-- Header -->
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Working with Refresh Triggers</h2>
<p class="mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-600">Understand how to trigger parts of your page to refresh when changes need to be applied. Allows a part of a tempalte to be refreshed without having to render the entire template again.</p>
<p class="mx-auto mt-6 max-w-xl text-base leading-8 text-gray-400">Right click and 'View page source' to see how this page was rendered.</p>
</div>
<!-- Body -->
<div id="root" class="px-4 sm:px-6 lg:px-8"></div>
</div>
</div>
</body>
<script>
let template = [
{"<>":"div","html":[
{"<>":"h3","class":"text-base font-semibold leading-6 text-gray-900","text":"Incremental Counters"},
{"<>":"dl","class":"mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3","html":[
{"<>":"div","class":"overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6","html":[
{"<>":"dt","class":"truncate text-sm font-medium text-gray-500","text":"Count"},
{"<>":"dd","#":"number","class":"mt-1 text-3xl font-semibold tracking-tight text-gray-900","text":"${number}"}
]},
{"<>":"div","class":"overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6","html":[
{"<>":"dt","class":"truncate text-sm font-medium text-gray-500","text":"Multiplier"},
{"<>":"dd","#":"multiplier","class":"mt-1 text-3xl font-semibold tracking-tight text-gray-900","text":"${multiplier}"}
]},
{"<>":"div","class":"overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6","html":[
{"<>":"dt","class":"truncate text-sm font-medium text-gray-500","text":"Percentage"},
{"<>":"dd","#":"percentage","class":"mt-1 text-3xl font-semibold tracking-tight text-gray-900","text":"${percentage}%"}
]}
]}
]},
{"<>":"div","class":"mt-8 flex w-full","html":[
{"<>":"button","type":"button","class":"flex-auto items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600","text":"Increment","onclick":e=>{
//Increment the number
e.obj.number++;
//Trigger an refresh (should match the event with the # above)
json2html.refresh("number");
//Increment the multiplier
e.obj.multiplier*=10;
//Trigger an update (should match the event with the # above)
json2html.refresh("multiplier");
//Increment the percentage
e.obj.percentage*=1.1;
e.obj.percentage = Math.round(e.obj.percentage,2);
//Trigger an update (should match the event with the # above)
json2html.refresh("percentage");
}},
{"<>":"button","type":"button","class":"ml-3 flex-auto items-center rounded-md bg-pink-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-pink-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600","text":"Decrement","onclick":e=>{
//Increment the number
e.obj.number--;
//Trigger an refresh (should match the event with the # above)
json2html.refresh("number");
//Increment the multiplier
e.obj.multiplier/=10;
//Trigger an refresh (should match the event with the # above)
json2html.refresh("multiplier");
//Increment the percentage
e.obj.percentage/=1.1;
e.obj.percentage = Math.round(e.obj.percentage,2);
//Trigger an refresh (should match the event with the # above)
json2html.refresh("percentage");
}}
]}
];
//Render the template with the initial values
document.getElementById("root").json2html({"number":1,"multiplier":10,"percentage":10},template);
</script>
</html>