Adding entry and refresh template using Tangular

28 views

Skip to first unread message

Hasan A Yousef

unread,

Mar 1, 2015, 4:26:00 AM3/1/15

to tot...@googlegroups.com

Hi Peter,

The below code run corrctly with me, I'm doing it in the correct way, is there a simpler way. thanks

<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
  <meta charset="utf-8">
  <title>Multi lines entry</title>
<script src="tangular.js"></script>
</head>
<body>

<div id='output'></div>

<input type="text" id="newOrderNum"/>
<input type="text" id="newOrderName"/>
<button id="AddOrderBtn">Add user</button>

<script id="template" type="text/html">
{{foreach m in orders}}
    <h2>Order num.{{m.number}} (current index: {{$index}})</h2>
    <div>{{m.name}}</div>
{{end}}
</script>

<script>
Tangular.register('plus', function() {});

var model = { name: 'total.js', age: 2, orders: [{ number: 1001, name: 'iPhone' }, { number: 1002, name: 'Samsung' }]};
var source = Tangular.compile(document.getElementById('template').innerHTML);

document.querySelector('#output').innerHTML = source(model);

document.querySelector('#AddOrderBtn').addEventListener("click", function(){

    var newON = document.querySelector('#newOrderNum').value;
    var newNM = document.querySelector('#newOrderName').value;

    model.orders.push({"number": newON, "name": newNM});

    document.querySelector('#newOrderNum').value="";
    document.querySelector('#newOrderName').value="";

    document.querySelector('#output').innerHTML = source(model);
});

</script>
</body>
</html>

Peter Širka

unread,

Mar 13, 2015, 10:41:30 AM3/13/15

to tot...@googlegroups.com

Hi Hasan,

sorry for delay, but I didn't know about new posts on Google Group. Please follow total.js on Gitter or on GitHub or on my e-mail :)