I'm following a tutorial on java modular script, in the same attempt to create on my server a small test like in the following codepen: link I have never used Mustache but it seems to be interesting although I can not make it work or look like in the codepen, any ideas?
index.html
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.2/mustache.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<div id="peopleModule">
<h1>People</h1>
<input placeholder="name" type="text">
<button id="addPerson">Add Person</button>
<ul id="people">
<script id="people-template" type="text/template">
{{#people}}
<li>
<span>{{.}}</span>
<i class="del">X</i>
</li>
{{/people}}
</script>
</ul>
</div>
script.js
var people = (function(){
var people = ['Will', 'Steve'];
// cache DOM
var $el = $('#peopleModule');
var $button = $el.find('button');
var $input = $el.find('input');
var $ul = $el.find('ul');
var template = $el.find('#people-template').html();
// bind events
$button.on('click', addPerson);
$ul.delegate('i.del', 'click', deletePerson);
render();
// functions
function render(){
Mustache.parse(template);
var rendered = Mustache.render(template, {people: people});
$ul.html(rendered);
}
function addPerson(value){
var name = (typeof value === "string") ? value : $input.val();
people.push(name);
render();
$input.val('');
console.log(people);
}
function deletePerson(event){
var $remove = $(event.target).closest('li');
var i = $ul.find('li').index($remove);
people.splice(i, 1);
render();
}
function returnPeople(){
console.log(people);
}
return{
addPerson: addPerson,
deletePerson: deletePerson,
returnPeople: returnPeople
}
})();