模板引擎之hogan.js------农村话10级讲解!!

2024年3月10日 179次阅读 来源: 荆棘鸟 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>

    <div id="wrapper"></div>

    <script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/hogan.js/3.0.2/hogan.js"></script>
    <script>
        var tab = {

            data: {
                "list":[
                    {"name":"lily", "age":18, "food":"苹果"},
                    {"name":"lucy", "age":20, "food":"香蕉"}
                ]
            },

            init: function() {
                this.onload()
            },

            onload: function() {
                // 定义模板
                var tpl =
                '{{#list}}'+
                    '<div>我叫{{name}}, 今年{{age}}岁, 最爱吃{{food}}</div>'+
                '{{/list}}'

                var result = this.renderHtml(tpl, {list:this.data.list});

                $('#wrapper').html(result)
            },

            renderHtml : function(tpl, data){
                var template = Hogan.compile(tpl);
                var result = template.render(data);
                return result;
            }
        }

        $(function() {
            tab.init()
        })
    </script>
</body>

</html>

代码 + html模板 + 渲染 非常简单的生成了代码, 再也不用去for循环便利了
一般 我们生产这种代码 都是插入html里面, 还可以继续封装 ,继续省事

基本语法(够用)
1.循环

// 记住 这个list是你自己定义的 比如上面就有 list:thid.data.list
// 这里的list也有判断是否存在的意思 比如说你的数据里面压根就没有...
{{#list}}
    ...
{{/list}}

2.判断

// 假如你去淘宝购物, 搜索某不可描述之商品, 然后搜不到 那就是没有产品列表
// 但是什么都不显示肯定不友好 所以当list(商品)不存在, 就显示下面的
{{^list}}
    您所搜索的商品不存在...
{{/list}}

3.枚举

// 上面给的例子,里面都是key:value的形式  but...
// 例如: list: ['张三', '李四' .....] 这时怎么办?? {{.}} 枚举..
{{#list}}
    今天值班的有{{.}}
{{/list}}

4. 还有什么转义 如{{{list}}}, 这样就不会被编译………..好饿, 好困…

    原文作者：荆棘鸟
    原文地址: https://segmentfault.com/a/1190000011401896
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞