I can not get Mustache to work

0

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
    }


})();
    
asked by PriNcee 25.11.2016 в 13:06
source

1 answer

1
  

The error is probably due to the location of script.js

<script type="text/javascript" src="script.js"></script>

Please note that the content of this is in a IIFE and is running before the HTML that is below is loaded .

  

One solution could be to move the script to the end of the document.

For example:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.2/mustache.min.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>
<!-- Justo debajo del html a ser afectado -->
<script type="text/javascript" src="script.js"></script>
    
answered by 25.11.2016 / 14:01
source