nealeu/Thymeleaf-test.html

## Thymeleaf-test.html
<!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>
	<!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>