Created
March 4, 2014 22:32
-
-
Save nealeu/9357170 to your computer and use it in GitHub Desktop.
Processing Thymeleaf template in Javascript...
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
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml" | |
xmlns:th="http://www.thymeleaf.org"> | |
<head> | |
<title>Good Thymes Virtual Grocery</title> | |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
<link rel="stylesheet" type="text/css" media="all" | |
href="../../../css/gtvg.css" th:href="@{/css/gtvg.css}" /> | |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> | |
</head> | |
<body> | |
<h1>Product list</h1> | |
<table> | |
<tr> | |
<th>NAME</th> | |
<th>PRICE</th> | |
<th>IN STOCK</th> | |
</tr> | |
<tr th:each="prod : ${prods}"> | |
<td th:text="${prod.name}">Onions</td> | |
<td th:text="${prod.price}">2.41</td> | |
<td th:text="${prod.inStock}? #{true} : #{false}">yes</td> | |
</tr> | |
</table> | |
<p> | |
<a href="../home.html" th:href="@{/}">Return to home</a> | |
</p> | |
<form> | |
<input name="/test/test1" x:field="text" /> | |
<input name="/test/test2" type="text" /> | |
<input name="/test/test3" type="text" /> | |
</form> | |
<button id="runButton">Run</button> | |
</body> | |
<script> | |
function find(selector) { | |
return $(document.querySelectorAll(selector)); | |
} | |
$("#runButton").click(function(){ | |
// var $all = find("[th\\:text]"); | |
// $all.each( function(element) { | |
// console.log($(this).attr("th:text") + ": " + $(this).text()); | |
// }); | |
// var $inputs = find("input[x\\:field]"); | |
// $inputs.each( function(element) { | |
// $(this).val("boo"); | |
// }); | |
function evaluate(expression, item) { // only deals with ${ignored.key} and not smartly :) | |
var key = expression.substring(expression.indexOf('.')+1,expression.length -1); | |
var val = item[key]; | |
return val; | |
} | |
// prob need context too | |
function populateNode(node, item) { | |
var matches = node.querySelectorAll("[th\\:text]"); | |
$(matches).each(function() { | |
var expression = $(this).attr("th:text"); | |
$(this).text( evaluate(expression, item)); | |
}); | |
} | |
var prods = [{name:"Apple", price: 0.52, inStock: true}, | |
{name:"Pear", price: 0.63, inStock: false}]; | |
var context = {"prods": prods}; | |
var eachNodes = document.querySelectorAll("[th\\:each]"); | |
var node = eachNodes[0]; | |
$node = $(node); | |
// item = prods[0]; // iterateCollection(context, node.attr("th:each"), function(item) { .. }); | |
var i; | |
for(i = 0; i < prods.length; i++) { | |
var item = prods[i]; | |
populateNode(node, item); | |
if (i < prods.length - 1) { | |
var $new = $node.clone(); | |
$node.after($new); | |
$node = $new; | |
node = $node.unwrap()[0]; | |
} | |
} | |
}); | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I bashed this out as I wondered about the idea of being able to have Thymeleaf templates used for client side population of fields.
Well... I populated the table. I then found something urgent to do, and I've forgotten why I thought it was a good avenue to go down :)