-
Notifications
You must be signed in to change notification settings - Fork 104
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added Native JS Support for events and rendering on elements. Removed support for tag, children and other deprecated attributes. Works for ES6 browsers only, removed support for legacy non ES6 browsers
- Loading branch information
Showing
15 changed files
with
583 additions
and
513 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>json2html - Events Tutorial</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">Adding Events to your Templates</h2> | ||
| <p class="mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-600">Understand how to add events to your templates like onclick and onready etc..</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> | ||
|
|
||
| <!-- Show that we're ready --> | ||
|
|
||
|
|
||
| <!-- Tutorials --> | ||
| <div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl border rounded p-10"> | ||
| <span id="ready" class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20 float-right">READY</span> | ||
| <ul id="list"></ul> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| </body> | ||
|
|
||
| <script> | ||
| //In this example we'll use the same list of employees but add a button were can can remove them from the list | ||
|
|
||
| //Data that we want to render | ||
| const employees = [ | ||
| {"name":"Jenny Brown","role":"CEO","management":true}, | ||
| {"name":"Ashley White","role":"CFO","management":true}, | ||
| {"name":"Brandon Green","role":"Graphic Designer"}, | ||
| {"name":"Sasha Black","role":"Front End Developer"} | ||
| ]; | ||
|
|
||
| //Template we'll use to render these employees | ||
| const template = {"<>":"li","class":"group","html": [ | ||
|
|
||
| //Span element with special logic for the class property | ||
| {"<>":"span","class":o=>{ | ||
|
|
||
| //If the user is part of managemnt then put them in blue | ||
| if(o.management) return("text-red-600"); | ||
| else return("text-pink-600"); | ||
|
|
||
| },"text":"${name} - ${role}"}, | ||
|
|
||
| //Add a button to remove this employee from the list | ||
| // not a great idea using an inline style, but shows that we can add any property to the DOM element | ||
| {"<>":"a","class":"ml-5 text-indigo-100 group-hover:text-indigo-800","href":"#","html":"×","title":"remove","onclick":function(e){ | ||
| //e.event => js event | ||
| //e.obj => object we're rendering | ||
| //e.data => data object we can optional assign during the render call | ||
|
|
||
| //Stop the link from navigating away | ||
| // example of how can can acces the jquery event | ||
| e.event.preventDefault(); | ||
|
|
||
| //Access this element's parent (the top level li element) | ||
| // then remove it | ||
| this.parentNode.remove(); | ||
| }} | ||
|
|
||
| ],"onready":function(e){ | ||
|
|
||
| //Show the ready message once the dom is ready with the rendered template | ||
| // onready is an event that's unique to json2html | ||
| document.getElementById("ready").classList.remove("hidden"); | ||
| }}; | ||
|
|
||
| document.getElementById("list").json2html(employees,template); | ||
| </script> | ||
| </html> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.