Why doesn't handlebars work?

Question

JavaScript

<ul class="updates">
    <script id="template" type="text/x-handlebars-template">
        <li>
            <h2>{{name}}</h2>
        </li>
    </script>
</ul>


<script src="js/jquery-1.11.1.js"></script>
<script src="js/handlebars-v1.3.0.js"></script>


<script type="text/javascript">

    $(document).ready(function () {

        var template = Handlebars.compile( $('#template').html() );
        $('.updates').append( template(data) );

        var data = {
            name: 'Jane Doe'
        }
    });
</script>

Does not work although I take everything as in the example

Answer 1

Your data variable is used before initialization. You need to swap these lines:

var data = {
    name: 'Jane Doe'
}

$('.updates').append( template(data) );

jsfiddle.net/xnrzwa59/1