node-json2html
Version:
json2html - HTML templating in pure javascript
159 lines (125 loc) • 7.33 kB
HTML
<html>
<head>
<title>json2html - Wrapper Component Tutorial</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- json2html -->
<script src="../json2html.js"></script>
</head>
<body></body>
<script>
//In this example we'll show you how you can create a component that we can used as a wrapper
// this works well when you want to create re-usable page wrapper etc..
//Our employee list
const employees = [
{"name":"Jenny Brown","role":"CEO","management":true,"access":["hr","finance","technical"],"payments":[{"date":"Today","amount":"$4,500"},{"date":"Last Week","amount":"$4,500"},{"date":"2 Weeks Ago","amount":"$3,500"}]},
{"name":"Ashley White","role":"CFO","management":true,"access":["hr","finance"],"payments":[{"date":"Yesterday","amount":"$3,500"},{"date":"Last Week","amount":"$3,500"},{"date":"2 Weeks Ago","amount":"$2,500"}]},
{"name":"Brandon Green","role":"Graphic Designer","access":["technical"],"payments":[{"date":"Today","amount":"$2,500"},{"date":"Last Week","amount":"$2,500"}]},
{"name":"Sasha Black","role":"Front End Developer","access":["technical"],"payments":[{"date":"Yesterday","amount":"$2,500"}]}
];
//Regsiter all components with json2html
// note we can also register a single component using
// json2html.component.add(name,template)
json2html.component.add({
//Create a page wrapper with a header and footer and a place for contents
"page":[
//Page Header
// we added this as the template
{"<>":"div","class":"px-6 py-24 sm:px-6 sm:py-32 lg:px-8","html":[
{"<>":"div","class":"mx-auto max-w-2xl text-center","html":[
{"<>":"h2","class":"text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl","text":"${title}"},
{"<>":"p","class":"mt-6 max-w-xl text-lg leading-8 text-gray-600","text":"${desc}"},
{"<>":"p","class":"mt-6 italic","html":"For a more comprehensive framework for application using json2html check out the <a class='text-indigo-600 hover:text-indigo-800' href='https://github.com/moappi/j2h-framework'>j2h framework</a>, it helps manage your json2html pages and components and is similar to react, plus it works with node.js and on the browser."},
{"<>":"p","class":"mt-6 max-w-xl text-base leading-8 text-gray-400","text":"Right click and 'View page source' to see how this page was rendered."}
]},
{"<>":"div","class":"mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl border rounded p-10","html":[
//Page Content
// note that we're using the last html parameter which is the html for the component (see use below)
// other paramters are
// obj: object that we're transforming (same as this)
// index: index of the object in the array (if we have one, otherwise 0)
// data: data object passed to json2html (see events in documentation)
// html: specific to a component, used to reference the html that this component wraps
{"html":(o,index,data,html)=>html}
]}
]}
],
//We've moved the employee to be a component
// allows to access this easily when we create the page
"employee":{"<>":"li","html": [
//Output the employee name
// note that the entire employee object is passed to this component
// allowing it to access properties like name and role
{"[]":"employee/name"},
{"<>":"div","class":"ml-5","html":[
//Employee Access
// note that the entire employee object is passed to this component
// allowing it to access the 'access' array
{"[]":"employee/access"},
//Employee Payments
// note that the entire employee object is passed to this component
// allowing it to access the 'payments' array
{"[]":"employee/payments"}
]}
]},
//Employee name (and role) Component
"employee/name":{"<>":"div","class":o=>{if(o.management) return("text-red-600"); else return("text-pink-600");},"text":"${name} - ${role}"},
//Employee access Component (lists all access inline)
"employee/access":{"<>":"div","html":[
//Let's add a title so we know what we're looking at
{"<>":"span","class":"font-gray-800","text":"Access - "},
//Inline list of access
{"<>":"ul","class":"italic text-gray-500 space-x-1 inline-block","html":[
//List all the access as an inline list
// use the access for each employee
{"<>":"li","class":"inline-block","{}":o=>o.access,"text":"${value}"}
]}
]},
//Employee Payments
"employee/payments":{"<>":"div","html":[
//Add a title so we know what we're looking at
{"<>":"div","class":"font-gray-800","text":"Payments Received"},
// note that we only created a component for the list item
// this requires us to wrap the component in a ul list
{"<>":"ul","class":"italic text-gray-500","html":[
//Render the employees payments using the employee/payment component
// note that we need to pass the payment array directly to this component so it can render each payment
// the data property MUST be a function with the return value being the data used to render this component
{"[]":"employee/payment","{}":o=>o.payments}
]}
]},
//Employee payment list item
// note how we do this differently than access
// this list item needs to be passed the payment array
"employee/payment":{"<>":"li","class":"ml-5","text":"${amount} (${date})"}
});
//Our employee page template
const template = [
//Our generic page component with the header and footer
{"[]":"page","html":[
//Here we're going to want to put the template that we want
// our generic page to wrap
//In our case we want this to be an employee list
{"<>":"ul","class":"space-y-5","html":[
//List all employees
// we do this by specifying that we want to render the 'employees' object
// with the employee component
{"[]":"employee","{}":o=>employees}
]}
]}
];
//Note we are now rendering to the root body element
// we'll let the page component take care of the header and footer plus rendering the content
// The data object we're now using will be passed to the page component
// this includes information like title and description of the page as well as the footer
// PLUS we'll also add the employees which is specific to this page that we're rendering
// this will allow us to access employees within the inner content of the page
// rendering them into a list
document.body.json2html({
"title":"Using a Wrapper Component",
"desc":"Understand how to use a component that can wrap around another template, plus how this can be used to generate a page wrapper",
"employees":employees
},template);
</script>
</html>