94 lines
2.0 KiB
JavaScript
94 lines
2.0 KiB
JavaScript
/*
|
|
* JavaScript Templates Demo
|
|
* https://github.com/blueimp/JavaScript-Templates
|
|
*
|
|
* Copyright 2013, Sebastian Tschan
|
|
* https://blueimp.net
|
|
*
|
|
* Licensed under the MIT license:
|
|
* https://opensource.org/licenses/MIT
|
|
*/
|
|
|
|
/* global tmpl */
|
|
|
|
/* eslint-disable strict */
|
|
|
|
;(function () {
|
|
'use strict'
|
|
|
|
var templateInput = document.getElementById('template')
|
|
var dataInput = document.getElementById('data')
|
|
var resultNode = document.getElementById('result')
|
|
var templateDemoNode = document.getElementById('tmpl-demo')
|
|
var templateDataNode = document.getElementById('tmpl-data')
|
|
|
|
/**
|
|
* Renders error messages
|
|
*
|
|
* @param {string} title Error title
|
|
* @param {Error} error Error object
|
|
*/
|
|
function renderError(title, error) {
|
|
resultNode.innerHTML = tmpl('tmpl-error', { title: title, error: error })
|
|
}
|
|
|
|
/**
|
|
* Renders the templating result
|
|
*
|
|
* @param {event} event Click event
|
|
*/
|
|
function render(event) {
|
|
event.preventDefault()
|
|
var data
|
|
try {
|
|
data = JSON.parse(dataInput.value)
|
|
} catch (e) {
|
|
renderError('JSON parsing failed', e)
|
|
return
|
|
}
|
|
try {
|
|
resultNode.innerHTML = tmpl(templateInput.value, data)
|
|
} catch (e) {
|
|
renderError('Template rendering failed', e)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Removes all child elements from a Node
|
|
*
|
|
* @param {HTMLElement} node HTML element node
|
|
*/
|
|
function empty(node) {
|
|
while (node.lastChild) {
|
|
node.removeChild(node.lastChild)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Initialization function
|
|
*
|
|
* @param {event} [event] Initialixation event
|
|
*/
|
|
function init(event) {
|
|
if (event) {
|
|
event.preventDefault()
|
|
}
|
|
templateInput.value = templateDemoNode.innerHTML.replace(
|
|
// Replace unnecessary whitespace:
|
|
/^\n|\s+$| {6}/g,
|
|
''
|
|
)
|
|
dataInput.value = JSON.stringify(
|
|
JSON.parse(templateDataNode.innerHTML),
|
|
null,
|
|
2
|
|
)
|
|
empty(resultNode)
|
|
}
|
|
|
|
document.getElementById('render').addEventListener('click', render)
|
|
document.getElementById('reset').addEventListener('click', init)
|
|
|
|
init()
|
|
})()
|