吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 826|回复: 9
收起左侧

[经验求助] 大神不要见笑,我在学习网页设计,求助一个art-template模块渲染出错的问题

[复制链接]
ease2007 发表于 2024-4-5 21:59
25吾爱币
HTML代码如下:

[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 加入模板工具 -->
    <script src="./js/template-web.js"></script>
    <title>用户信息管理</title>
</head>

<body>
    <h2>用户信息管理</h2>
    <p>
        <a href="/">主页</a>  <a href="#">添加</a>
    </p>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>身高</th>
                <th>电话</th>
                <th>地址</th>
                <th>操作</th>
            </tr>
        </thead>
        <!-- 下面是数据体 -->
        <tbody id="content"></tbody>
        <!-- 下面是循环体 -->
        <script type="text/html" id="dataList">
            {{each data}}
            <tr>
                <th>{{$value.id}}</th>
                <th>{{$value.name}}</th>
                <th>{{$value.sex}}</th>
                <th>{{$value.age}}</th>
                <th>{{$value.height}}</th>
                <th>{{$value.phone}}</th>
                <th>{{$value.address}}</th>
                <th>
                    <a href="/show?id={{data.id}}" id="show">查看</a>  
                    <a href="/edit?id={{data.id}}" id="edit">编辑</a>  
                    <a href="/delete?id={{data.id}}" id="delete">删除</a>
                </th>
            </tr>
            {{/each}}
        </script>
    </table>
</body>

</html>

<script>
    var data = [
        {
            "id": "1001",
            "name": "张三",
            "sex": "男",
            "age": "32",
            "height": "175",
            "phone": "13320998888",
            "address": "中国大地方"
        },
        {
            "id": "1002",
            "name": "李四",
            "sex": "男",
            "age": "37",
            "height": "165",
            "phone": "13012345566",
            "address": "中国很大地方"
        }
    ];
    var htmls = template("datalist", data);
    document.getElementById("content").innerHTML = htmls;
</script>


我看手册说明,这样是正确的啊,但是始终是报如下错误,数据无法实现渲染,页面没有数据内容。由于是自己学习,确实找不到地方去问了,看能不能请教一下这里的大神。可能有点基础,请大神多多指教,不要见笑!不胜感谢了啊!
下面是浏览器控制台报错内容,大概就是没有找到模板,无法读取一个空值的value属性
[HTML] 纯文本查看 复制代码
Uncaught TemplateError: template not found: Cannot read properties of null (reading 'value')


但是确实搞了几天了,头都大了,没有找出问题所在,用的是最新的art-template模板,文件名为:template-web.js



最佳答案

查看完整内容

var htmls = template("datalist", data); -->> var htmls = template("dataList", { data: data });

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

991547436 发表于 2024-4-5 21:59
var htmls = template("datalist", data);   -->>      var htmls = template("dataList", { data: data });

bloodmarry12 发表于 2024-4-5 22:57
本帖最后由 bloodmarry12 于 2024-4-5 22:58 编辑

基本的大小写错误,也是新手最常见的错误,dataList 和 datalist,你再瞅瞅,前后不一致。
前面<script type="text/html" id="dataList">
用的“ dataList
后面也应该是 var htmls = template("dataList", data);
你写成了datalist。
bloodmarry12 发表于 2024-4-5 22:59
这个编辑器我不太会用,你明白我意思就行,id的值前后统一就可以了。
bloodmarry12 发表于 2024-4-5 23:01
所以,告诉你一个最简单避免这种错误的方法,别自己敲,直接复制更方便,自己敲很容易出现这种错误,人肉燕又不容易发现。
bloodmarry12 发表于 2024-4-5 23:07
还有href="/show?id={{data.id}}" 也是错的,data是你的数据集,跟你上面的代码取id应该一样的{{$value.id}}
 楼主| ease2007 发表于 2024-4-5 23:26
bloodmarry12 发表于 2024-4-5 22:57
基本的大小写错误,也是新手最常见的错误,dataList 和 datalist,你再瞅瞅,前后不一致。
前面
用的“ d ...

感谢,这个确实错了,我改了。但是现在不报错了,数据一片空白,也还是没有。连报错都没有,数据也没有,又头大了。再麻烦帮助看看可以么?
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 加入模板工具 -->
    <script src="./template-web.js"></script>
    <title>用户信息管理</title>
</head>

<body>
    <h2>用户信息管理</h2>
    <p>
        <a href="/">主页</a>  <a href="#">添加</a>
    </p>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>身高</th>
                <th>电话</th>
                <th>地址</th>
                <th>操作</th>
            </tr>
        </thead>
        <!-- 下面是数据体 -->
        <tbody id="content"></tbody>
        <!-- 下面是循环体 -->
        <script type="text/html" id="dataList">
            {{each data}}
            <tr>
                <th>{{$value.id}}</th>
                <th>{{$value.name}}</th>
                <th>{{$value.sex}}</th>
                <th>{{$value.age}}</th>
                <th>{{$value.height}}</th>
                <th>{{$value.phone}}</th>
                <th>{{$value.address}}</th>
                <th>
                    <a href="/show?id={{$value.id}}" id="show">查看</a>  
                    <a href="/edit?id={{$value.id}}" id="edit">编辑</a>  
                    <a href="/delete?id={{$value.id}}" id="delete">删除</a>
                </th>
            </tr>
            {{/each}}
        </script>
    </table>
</body>

</html>

<script>
    var data = [
        {
            "id": "1001",
            "name": "张三",
            "sex": "男",
            "age": "32",
            "height": "175",
            "phone": "13320998888",
            "address": "中国大地方"
        },
        {
            "id": "1002",
            "name": "李四",
            "sex": "男",
            "age": "37",
            "height": "165",
            "phone": "13012345566",
            "address": "中国大大地方"
        }
    ];
    // console.log(template);
    var htmls = template("dataList", data);
    console.log(htmls);
    document.getElementById("content").innerHTML = htmls;
</script>


-----------------------------------------
现在是这样了
用户信息管理主页  添加ID姓名性别年龄身高电话地址操作
 楼主| ease2007 发表于 2024-4-5 23:27
bloodmarry12 发表于 2024-4-5 23:07
还有href="/show?id={{data.id}}" 也是错的,data是你的数据集,跟你上面的代码取id应该一样的{{$value.id} ...

非常感谢!我也是搞头晕了~~~错误都没有发现,但是改了之后,仍然没有解决问题。现在是变成一片空白了,也没有报错,也没有数据。哎~头大惨了~~
有劳能帮助再看看么?


用户信息管理主页  添加ID姓名性别年龄身高电话地址操作


[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 加入模板工具 -->
    <script src="./template-web.js"></script>
    <title>用户信息管理</title>
</head>

<body>
    <h2>用户信息管理</h2>
    <p>
        <a href="/">主页</a>  <a href="#">添加</a>
    </p>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>身高</th>
                <th>电话</th>
                <th>地址</th>
                <th>操作</th>
            </tr>
        </thead>
        <!-- 下面是数据体 -->
        <tbody id="content"></tbody>
        <!-- 下面是循环体 -->
        <script type="text/html" id="dataList">
            {{each data}}
            <tr>
                <th>{{$value.id}}</th>
                <th>{{$value.name}}</th>
                <th>{{$value.sex}}</th>
                <th>{{$value.age}}</th>
                <th>{{$value.height}}</th>
                <th>{{$value.phone}}</th>
                <th>{{$value.address}}</th>
                <th>
                    <a href="/show?id={{$value.id}}" id="show">查看</a>  
                    <a href="/edit?id={{$value.id}}" id="edit">编辑</a>  
                    <a href="/delete?id={{$value.id}}" id="delete">删除</a>
                </th>
            </tr>
            {{/each}}
        </script>
    </table>
</body>

</html>

<script>
    var data = [
        {
            "id": "1001",
            "name": "张三",
            "sex": "男",
            "age": "32",
            "height": "175",
            "phone": "13320998888",
            "address": "中国大地方"
        },
        {
            "id": "1002",
            "name": "李四",
            "sex": "男",
            "age": "37",
            "height": "165",
            "phone": "13012345566",
            "address": "中国大大地方"
        }
    ];
    // console.log(template);
    var htmls = template("dataList", data);
    console.log(htmls);
    document.getElementById("content").innerHTML = htmls;
</script>
bloodmarry12 发表于 2024-4-5 23:36
你再看看你的数据,一片空白,看看后台是不是报空指针了,debug一下,我现在没有开发环境,能看到的只有这么多了,如果代码没问题,剩下多半就数据问题了,刚开始很正常,都是在错误中成长的。
 楼主| ease2007 发表于 2024-4-6 00:44
991547436 发表于 2024-4-6 00:23
var htmls = template("datalist", data);   -->>      var htmls = template("dataList", { data: data }) ...

非常感谢!!!啊!!!!!!!!!!!!!!!!!!!!!!!!
搞定!!!!搞定!!!!!!!!!!
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-12-12 10:15

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表