handlebars 点击弹出层渲染内容

Question

点击按钮，弹出层，里面显示不同的内容，这个用handbars应该要怎么写，弹出层功能会弄，就是那个渲染对应的数据，不知道弄？

var spotData = {

张三: {
    tit:'张三',
    txt:'使用着八极拳，生性乐观活泼的女孩子。 <br>柔软的动作中可看出她的武术刚柔并济。 <br>平时以舞妓的练习作为自我「心志」的锻鍊。 ',
    img:'http://images.doa5.cn/v2/images/role/r01.png'
},
李四: {
    tit:'李四',
    txt:'使用着八极拳，生性乐观活泼的女孩子。 <br>柔软的动作中可看出她的武术刚柔并济。 <br>平时以舞妓的练习作为自我「心志」的锻鍊。 ',
    img:'http://images.doa5.cn/v2/images/role/r02.png'
},
王五: {
    tit:'王五',
    txt:'使用着八极拳，生性乐观活泼的女孩子。 <br>柔软的动作中可看出她的武术刚柔并济。 <br>平时以舞妓的练习作为自我「心志」的锻鍊。 ',
    img:'http://images.doa5.cn/v2/images/role/r03.png'
}

};

<div class="picList">

                <ul>
                    <li class="item" rel="张三" id="110">
                        张三
                    </li>
                    <li class="item" rel="李四" id="111">
                        李四
                    </li>
                    <li class="item" rel="王五" id="112">
                        王五
                    </li>
                </ul>
            </div>
            <!-- //role-main 01 -->
            <div class="popup" id="role">
                <script type="text/x-handlebars-template" id="role-template">
                  {{#each this}}
                    <div class="tit">{{tit}}的介绍</div>
                    <div class="txt">{{txt}}</div>
                    <img src="{{img}}" alt="" class="role-img">
                  {{/each}}
                </script>
            </div>