码迷,mamicode.com
首页 > Web开发 > 详细

Html模板引擎Handlerbars使用demo

时间:2019-01-02 20:09:33      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:--   位置   handle   span   bar   target   填充   gis   content   

1.自定义demo

<html>
    <head>
        <script src="./handlebars-v4.0.12.js"></script>
    </head>
    <body>
        <ul id=‘tmpContainer1‘></ul>
        <ul id = ‘tmpContainer2‘></ul>

        <!--案例1-->
        <script id=‘tmp1‘ type="text/x-handlebars-template">
                {{#each people}}
                <li>{{name}}</li>
                {{/each}}
        </script>
        <script type="text/javascript">
            //1.定义模板填充用的参数
            var content = {
                people : [
                    {name:‘aa‘, age: 12},
                    {name:‘bb‘, age: 12},
                    {name:‘cc‘, age: 15},
                    {name:‘dd‘, age: 16},
                ]
            }
            //2.定义模板
            var template1 = Handlebars.compile(document.getElementById("tmp1").innerHTML);
            //3.模板套用填充参数,返回模板填充结果
            var html1 = template1(content);
            //4.将模板填充的结果嵌入到页面响应位置
            document.getElementById("tmpContainer1").innerHTML = html1;
        </script>

        <!--======================================================-->

        <!--案例2-->
        <script id = ‘tmp2‘ type="text/x-handlebars-template">
            {{#each people}}
            <li>{{combine this}}</li>
            {{/each}}
        </script>
        <script>
             var content = {
                people : [
                    {name:‘aa‘, age: 12},
                    {name:‘bb‘, age: 12},
                    {name:‘cc‘, age: 15},
                    {name:‘dd‘, age: 16},
                ]
            }
            //注意helper的注册要先于 Handlebars.compile()的执行,否则报错。
            Handlebars.registerHelper(‘combine‘,function(item){
                return item.name + ‘ ‘+ item.age;
            })
            
            var template2 = Handlebars.compile(document.getElementById("tmp2").innerHTML);
            var html2 = template2(content);
            document.getElementById("tmpContainer2").innerHTML = html2;
           
        </script>
    </body>
</html>

2. 更多demo(较详细介绍)请参看如下博客

http://www.cnblogs.com/zcynine/p/5014421.html

Html模板引擎Handlerbars使用demo

标签:--   位置   handle   span   bar   target   填充   gis   content   

原文地址:https://www.cnblogs.com/zhcBlog/p/10210755.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!