{{#section 'head'}}
<script src="//cdnjs.cloudflare.com/ajax.libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script id="nurseryRhymeTemplate" type="text/x-handlebars-template">
    Marry had a little <b>\{{animal}}</b>, its <b>\{{bodyPart}}</b>
    was <b>\{{adjective}}</b> as <b>\{{noun}}</b>.
</script> 
{{/section}} 

{{! div는 특별한 의미가 있는건 아니고 그냥 가상의 레이아웃을 나누는 태그라고함}}
<div id="nurseryRhyme">Click a button....</div>
<hr>{{! 문단선을 의미! ㅋㅋ 태그 검색하면서 하니 쉽네}}
<button id="btnNurseryRhyme">Generate nursery rhyme</button>
<button id="btnNurseryRhymeAjax">Generate nursery rhyme from AJAX</button>

{{#section 'jquery'}}
<script>
    $(document).ready(function () {
        var nurseryRhymeTemplate = Handlebars.compile(
            $('#nurseryRhymeTemplate').html());

        var $nurseryRhyme = $('#nurseryRhyme');

        $('#btnNurseryRhyme').on('click', function (evt) {
            evt.preventDefault();
            $nurseryRhyme.html(nurseryRhymeTemplate({
                animal: 'basilisk',
                bodyPart: 'tail',
                adjective: 'sharp',
                noun: 'a needle'
            }));
        });
        
        
        $('btnNurseryRhymeAjax').on('click', function (evt) {
            evt.preventDefault();
            $.ajax('/data/nursery-rhyme', {
                success: function (data) {
                    $nurseryRhyme.html(nurseryRhymeTemplate(data))
                }
            });
        });
    });
</script>
 {{/section}}