首页 前端知识 handlebars.js使用:用ajax渲染内容到前端

handlebars.js使用:用ajax渲染内容到前端

2024-11-10 09:11:45 前端知识 前端哥 729 32 我要收藏

背景:之前写前后端不分离的项目,都是通过ThinkTemplate(thinkphp)和Thymeleaf、FreeMarker(Java)去实现的,但是有些数据需要动态去体现使用过ajax去手动操作dom通常有点麻烦,偶然间知道这个js模板还是蛮感兴趣,功能强大。

文章目录

一、Handlebars.js是什么?

二、使用步骤(each-基本循环使用方法)

三、进阶

总结


前言

        小弟之前愚蠢的想法就是ajax请求的话都是一个一个去添加,每一块内容先拼接好一整块,然后再循环输出。(这里指ajax请求的情况下,其他情况下不分离模板直接for很快的)

        直到今天,遇到了handlebars.js

        handlebars.js可以在提前设置好的模板内渲染出内容,功能强大下面演示


提示:以下是本篇文章正文内容,下面案例可供参考

一、Handlebars.js是什么?

        Handlebars.js是一个Javascript客户端的模板引擎(它也能用于服务器端)。它是一个Javascript库,就像你在页面中包含其他.js文件一样。有了它,在你的HTML页面内添加模板,模板会被你通过Handlebars.js函数传递的数据中的值解析或者插值。

二、使用步骤(each-基本循环使用方法)

1.设置模板

代码如下:

html:

<body>
    <script id="template" type="text/x-handlebars-template">
        <ul>
            {{#each items}}
                <li>{{this.name}} - {{this.value}}</li>
            {{/each}}
        </ul>
    </script>
    <div id="result"></div>
    <a href="javascript:;" onclick="ceshi()">测试</a>
    <a href="javascript:;" onclick="xuanran()">渲染</a>
</body>

template就是我们设置好的模板,相当于你设置好了一个商品展示卡(我上面的图)

2.Ajax获取数据

代码如下:

Javascript:

<script>
function ceshi(){
    $.ajax({
        type: "GET",
        url: "",
        success: function(e) {
            console.log(e)
        },
        error: function() {
            console.log('失败')
        }
    })
};
function xuanran(){
    $.ajax({
        url: '',
        method: 'GET',
        success: function(data) {
            var source = $('#template').html();
            var template = Handlebars.compile(source);
            var html = template({ items: data.data });
            console.log(html);
            $('#result').html(html);
        }
    });
};
</script>

这里是利用Ajax去请求后端获取数据。

这里可以看出,数据是从这边传进去的:

template({ items: data.data });

3.后端提供数据

public function test()
    {
        $a = [
            ['name' => '名字','value'   =>  '小明'],
            ['name' => '年龄','value'   =>  '18'],
            ['name' => '性别','value'   =>  '男'],
            ['name' => '身高','value'   =>  '181'],
            ['name' => '体重','value'   =>  '70kg'],
        ];

        if(false === $this->request->isAjax())
        {
            return view();
        }

        return api($a,200,'请求成功');
        
    }

这里是测试数据故意弄成这样子

这种数据格式也是经常见吧,不像常规的很好认的那种

效果

点击获取数据后就会渲染。

分析

你得到数据之后,他是这样的

//这个js
var html = template({ items: data.data });

//说明你已经拿到这样的数据了
"data": [
        {
            "name": "名字",
            "value": "小明"
        },
        {
            "name": "年龄",
            "value": "18"
        },
        {
            "name": "性别",
            "value": "男"
        },
        {
            "name": "身高",
            "value": "181"
        },
        {
            "name": "体重",
            "value": "70kg"
        }
    ]



//然后这边#each表示进入
{{#each items}}

//说明到达每一块
{
     "name": "名字",
     "value": "小明"
}


//这里你就只能用
{{this.name}} - {{this.value}}


//这种模板还是很可以

三、进阶

这样我们就可以做更复杂的操作了

each-基本循环使用方法

前端:

<body>
    <h1>each-基本循环使用方法</h1>
    <!--基础html框架-->
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="tableList">
        </tbody>
    </table>

    <!--id可以用来唯一确定一个模版,type是模版固定的写法-->
    <script id="table-template" type="text/x-handlebars-template">
        {{#each student}}
        <tr>
            <td>{{name}}</td>
            <td>{{sex}}</td>
            <td>{{age}}</td>
        </tr>
        {{/each}}
    </script>
</body>
    <!--进行数据处理、html构造-->
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                url:'student',
                method:'GET',
                success:function(data){
                var myTemplate = Handlebars.compile($("#table-template").html());
                //将json对象用刚刚注册的Handlebars模版封装,得到最终的html,插入到基础table中。
                $('#tableList').html(myTemplate(data.data));
                }
            });
        });
    </script>

后端:

public function test1()
    {
        if(false === $this->request->isAjax())
        {
            return view();
        }
    }


public function student()
    {
        $student    =   [
            [
                'name'  => "张三",
                'sex'   => "男",
                'age'   => 28
            ],
            [
                'name'  => "李四",
                'sex'   => "女",
                'age'   => 30
            ],
            [
                'name'  => "妞妞",
                'sex'   => "女",
                'age'   => 32
            ]
        ];

        return api(['student'=>$student],200,'请求成功');
    }

应该很好分析这个是干嘛的

with-进入到某个属性(进入到某个上下文环境)

分析:

首先来构造一个复杂的json(工作中经常遇到的,给前端小姐姐上点压力)

先给大家看看前端的页面加载出来是没有数据的

等到数据出来时,他才开始渲染出来:(其实这一直是我想要的,用vue或者其他也能达到这种效果,但是还是喜欢有些杂糅在一起的)

代码如下:

前端:

<body>
       <h1>with-进入到某个属性(进入到某个上下文环境)</h1>
        <!--基础html框架-->
       <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>兴趣爱好</th>
            </tr>
        </thead>
        <tbody id="tableList">
        </tbody>
    </table>
     <!--Handlebars.js模版放在script标签中,保留了html原有层次结构,模版中要写一些操作语句-->
  <!--id可以用来唯一确定一个模版,type是模版固定的写法-->
    <script id="table-template" type="text/x-handlebars-template">
      {{#each this}}
        <tr>
            <td>{{name}}</td>
            <td>{{sex}}</td>
            <td>{{age}}</td>
            <td>
                 {{#with favorite}}
                    {{#each this}}
                        <p>{{name}}</p>
                    {{/each}}
                 {{/with}}
            </td>
        </tr>
        {{/each}}
    </script>
</body>
    <!--进行数据处理、html构造-->
    <script type="text/javascript">
       $(document).ready(function() {
        $.ajax({
                url:'test2api',
                method:'GET',
                success:function(data){
                //$("#table-template").html()是jquery的语法。。。
                var myTemplate = Handlebars.compile($("#table-template").html());
                //将json对象用刚刚注册的Handlebars模版封装,得到最终的html,插入到基础table中。
                $('#tableList').html(myTemplate(data.data.student));
                }
            });
     });
  </script>

后端:

    public function test2()
    {
        if(false === $this->request->isAjax())
        {
            return view();
        }
    }

    public function test2api()
    {
        $student  =   [
            [
                'name'  => "张三丰",
                'sex'   => "男",
                'age'   => 28,
                'favorite'  =>[
                    ['name' =>  "唱歌"],
                    ['name' =>  "篮球"]
                ]
            ],
            [
                'name'  => "李妮妮",
                'sex'   => "女",
                'age'   => 30,
                'favorite'  =>[
                    ['name' =>  "上网"],
                    ['name' =>  "足球"]
                ]
            ],
            [
                'name'  => "王妞妞",
                'sex'   => "女",
                'age'   => 18,
                'favorite'  =>[
                    ['name' =>  "电影"],
                    ['name' =>  "旅游"]
                ]
            ]
        ];


        return api(['student'=>$student],200,'请求成功');

    }

这个老哥写的好,可以参考他的,我也是参考他的:JavaScript页面模版引擎handlebars.js学习及使用_handlebars.js for-CSDN博客

对了我这tp8写的返回json的函数是这个:

function api($data, $code = 200, $msg = 'Success')
{
    $result = [
        'code' => $code,
        'message' => $msg,
        'data' => $data,
    ];

    return json($result);
}

放在公共函数那边


总结

Ajax渲染页面的很早就想用找不到方便的,奈何本身就懒得写dom(我很菜),找到这个可以做很多事。

有的时候咱页面又不想被扒下来,就可以用这种方式

1.在Ajax请求的时候加个加个参数:域名还是其他加密起来,传过去参数(域名)不对,就得不到数据了,跨域也给它开上。

var domain = document.domain;
$.ajax({
        url: '/xxxxx?domain='+domain,
        method: 'GET',
        success: function(data) {
            var source = $('#template').html();
            var template = Handlebars.compile(source);
            var html = template({ items: data.data });
            console.log(html);
            $('#result').html(html);
        }
    });

2.把F12禁用掉,不要让他看到咱返回的数据结构。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/20108.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!