那些遇到过的问题

Handlebars嵌套'each'语法 - 不迭代每个元素

Cro*_*onk 15 each json nested handlebars.js

我在这个Javascript/JSON/Handlebars事物上是全新的,我在使用两个嵌套级别获取JSON对象时无法在Handlebars模板中工作.

我已经用JSONLint验证了JSON对象,所以它是有效的JSON代码,但我不知道我是否有正确的JSON格式来使模板正常工作.:)(我正在另一个系统中手动构建JSON.)或许它是我错误的模板的语法.这就是我希望找到的......

简短说明:此对象是目录.我有章节,然后是每章内的电影.因此,电影是每个章节元素的嵌套元素.

我希望HTML输出类似于:

Chapter1:  ChapterName
       Movie1: MovieName
       Movie2: MovieName
Chapter2:  Chaptername
       Movie1: MovieName
       Movie2: MovieName
       Movie3: MovieName
Run Code Online (Sandbox Code Playgroud)

我似乎最终只得到了一个数据实例(我的JSON对象中的最后一个元素),或者我什么都没得到.(取决于我尝试的小调整或版本.)浏览器控制台不显示任何错误.

这是我到目前为止尝试使用的所有代码(脚本,HTML,模板等):

<!DOCTYPE html>
<html>
<head>  <meta charset="UTF-8">
    <title>Handlebars Demo</title>
    <!-- dependant files -->
    <script src="Handlebars.js"></script>
</head>

<!-- template -->
<script id="template2" type="text/x-handlebars-template">
    <div>Chapter stuff:</div>
    <ul>{{#each Chapter}}
        <ol>{{@index}} {{ChapterName}}
        {{#each movies}}
            <li>Movie ID:{{movieIDnum}}</li>
        {{/each}}
        </ol>
        {{/each}}
    </ul>
</script>


<body><div id="main"></div></body>

<script>
    var source = document.getElementById('template2').innerHTML;
    var template = Handlebars.compile(source);
    var data = {
        "Chapter" : {
                "ChapterName" : "Introduction",
                "chapterNum" : "1",
                "movies" : [
                        {
                        "movieIDnum" : "16244028",
                        "movieName" : "Update Test Movie 0",
                        "movieFileName" : "Test0.mov",
                        "moviePositionInChapter" : "1"
                        }
                ]
        },

        "Chapter" : {
            "ChapterName" : "Welcome",
            "chapterNum" : "2",
            "movies" : [
                    {
                    "movieIDnum" : " 17322365",
                    "movieName" : "Update Test movie 1",
                    "movieFileName" : "Test1.mov",
                    "moviePositionInChapter" : "1"
                    },
                    {
                    "movieIDnum" : " 17326267",
                    "movieName" : "Update Test movie 3",
                    "movieFileName" : "Test3.mov",
                    "moviePositionInChapter" : "2"
                    }
            ]
        },

        "Chapter" : {
            "ChapterName" : "The new Interface",
            "chapterNum" : "2",
            "movies" : [
                {
                "movieIDnum" : " 1732123476",
                "movieName" : "Update Test movie 12",
                "movieFileName" : "Test12.mov",
                "moviePositionInChapter" : "1"
                },
                {
                "movieIDnum" : " 173262373",
                "movieName" : "Update Test movie 9",
                "movieFileName" : "Test9.mov",
                "moviePositionInChapter" : "2"
                },
                {
                "movieIDnum" : " 173273474",
                "movieName" : "Update Test movie 10",
                "movieFileName" : "Test10.mov",
                "moviePositionInChapter" : "3"
                }
            ]
        },

        "Chapter" : {
            "ChapterName" : "What is an Update?",
            "chapterNum" : "4",
            "movies" : [
                {
                "movieIDnum" : " 177342131",
                "chapterNum" : "4",
                "chapterName" : "What is an Update?",
                "movieName" : "Test movie again",
                "movieFileName" : "Test13.mov",
                "moviePositionInChapter" : "1"
                }
                ]
                },
        "Chapter" : {
            "ChapterName" : "Editing",
            "chapterNum" : "5",
            "movies" : [
                {
                "movieIDnum" : " 173290878",
                "movieName" : "Update Test movie 14",
                "movieFileName" : "Test14mov",
                "moviePositionInChapter" : "1"
                },
                {
                "movieIDnum" : " 177344914",
                "movieName" : " Movie 15 Test",
                "movieFileName" : "Test233.mov",
                "moviePositionInChapter" : "2"
                }
            ]
        }

    }

    var result = template(data);
    document.write(result);

</script>
</html>
Run Code Online (Sandbox Code Playgroud)

我想知道为什么这不起作用,而不仅仅是"以下是如何使用完全不同的格式使用其他4种不同的东西解决问题".我的理解是,这应该适用于我尝试使用的工具.我想更好地理解这些工具并从过程中学习,而不仅仅是获得解决方案.(你知道,教一个人钓鱼......))

谢谢,J

pdj*_*ota 30

有一些变化需要建议,首先你不应该写一个带有几个键的对象{Chapter:,Chapter:,etc ...}另一个建议是检查Handlebars的工作方式,它不需要每个每个案例.希望它澄清尝试这些更改:

<!DOCTYPE html>
<html>
<head>  <meta charset="UTF-8">
    <title>Handlebars Demo</title>
    <!-- dependant files -->
    <script src="handlebars.js"></script>
</head>

<!-- template -->
<script id="template2" type="text/x-handlebars-template">
    <div>Chapter stuff:</div>
    <ul>{{#Chapters}}
        <ol>{{@index}} {{ChapterName}}
        {{#movies}}
            <li>Movie ID:{{movieIDnum}}</li>
        {{/movies}}
        </ol>
        {{/Chapters}}
    </ul>
</script>


<body><div id="main"></div></body>

<script>
    var source = document.getElementById('template2').innerHTML;
    var template = Handlebars.compile(source);
    var data = [
        {
                "ChapterName" : "Introduction",
                "chapterNum" : "1",
                "movies" : [
                        {
                        "movieIDnum" : "16244028",
                        "movieName" : "Update Test Movie 0",
                        "movieFileName" : "Test0.mov",
                        "moviePositionInChapter" : "1"
                        }
                ]
        },
        {
            "ChapterName" : "Welcome",
            "chapterNum" : "2",
            "movies" : [
                    {
                    "movieIDnum" : " 17322365",
                    "movieName" : "Update Test movie 1",
                    "movieFileName" : "Test1.mov",
                    "moviePositionInChapter" : "1"
                    },
                    {
                    "movieIDnum" : " 17326267",
                    "movieName" : "Update Test movie 3",
                    "movieFileName" : "Test3.mov",
                    "moviePositionInChapter" : "2"
                    }
            ]
        },
        {
            "ChapterName" : "The new Interface",
            "chapterNum" : "2",
            "movies" : [
                {
                "movieIDnum" : " 1732123476",
                "movieName" : "Update Test movie 12",
                "movieFileName" : "Test12.mov",
                "moviePositionInChapter" : "1"
                },
                {
                "movieIDnum" : " 173262373",
                "movieName" : "Update Test movie 9",
                "movieFileName" : "Test9.mov",
                "moviePositionInChapter" : "2"
                },
                {
                "movieIDnum" : " 173273474",
                "movieName" : "Update Test movie 10",
                "movieFileName" : "Test10.mov",
                "moviePositionInChapter" : "3"
                }
            ]
        },
        {
            "ChapterName" : "What is an Update?",
            "chapterNum" : "4",
            "movies" : [
                {
                "movieIDnum" : " 177342131",
                "chapterNum" : "4",
                "chapterName" : "What is an Update?",
                "movieName" : "Test movie again",
                "movieFileName" : "Test13.mov",
                "moviePositionInChapter" : "1"
                }
                ]
        },
        {
            "ChapterName" : "Editing",
            "chapterNum" : "5",
            "movies" : [
                {
                "movieIDnum" : " 173290878",
                "movieName" : "Update Test movie 14",
                "movieFileName" : "Test14mov",
                "moviePositionInChapter" : "1"
                },
                {
                "movieIDnum" : " 177344914",
                "movieName" : " Movie 15 Test",
                "movieFileName" : "Test233.mov",
                "moviePositionInChapter" : "2"
                }
            ]
        }
    ];

    var result = template({Chapters: data});
    document.write(result);

</script>
</html>
Run Code Online (Sandbox Code Playgroud)

Tay*_*ler 11

pdjota是对的.这个答案只是为了展示如何使用每个块助手.

就像明智地指出的pdjota一样,你要覆盖对象的元素,因为它们都有相同的键,即"章节".因此,转换data为对象数组,而不是具有相同键的对象对象.

如果你这样做,你仍然可以data进入template().您缺少的是如何引用每个块中使用的对象的属性.这是完成的this.例如,如果你在电影迭代器,电影对象的属性被引用如下:this.movieIDnum,this.movieName,等.

<!DOCTYPE html>
<html>
<head>  
    <meta charset="UTF-8">
    <title>Handlebars Demo</title>
    <!-- dependant files -->
    <script src="Handlebars.js"></script>
</head>

<!-- template -->
<script id="template2" type="text/x-handlebars-template">
    <div>Chapter stuff:</div>
    <ul>
        {{#each this}}
            <ol>Chapter{{this.chapterNum}}: {{this.ChapterName}}
                {{#each movies}}
                    <li>Movie{{this.moviePositionInChapter}}: {{this.movieName}}</li>
                {{/each}}
            </ol>
        {{/each}}
    </ul>
</script>


<body><div id="main"></div></body>

<script>
    var source = document.getElementById('template2').innerHTML;
    var template = Handlebars.compile(source);
    var data = [
        {
                "ChapterName" : "Introduction",
                "chapterNum" : "1",
                "movies" : [
                        {
                        "movieIDnum" : "16244028",
                        "movieName" : "Update Test Movie 0",
                        "movieFileName" : "Test0.mov",
                        "moviePositionInChapter" : "1"
                        }
                ]
        },
        {
            "ChapterName" : "Welcome",
            "chapterNum" : "2",
            "movies" : [
                    {
                    "movieIDnum" : " 17322365",
                    "movieName" : "Update Test movie 1",
                    "movieFileName" : "Test1.mov",
                    "moviePositionInChapter" : "1"
                    },
                    {
                    "movieIDnum" : " 17326267",
                    "movieName" : "Update Test movie 3",
                    "movieFileName" : "Test3.mov",
                    "moviePositionInChapter" : "2"
                    }
            ]
        },
        {
            "ChapterName" : "The new Interface",
            "chapterNum" : "2",
            "movies" : [
                {
                "movieIDnum" : " 1732123476",
                "movieName" : "Update Test movie 12",
                "movieFileName" : "Test12.mov",
                "moviePositionInChapter" : "1"
                },
                {
                "movieIDnum" : " 173262373",
                "movieName" : "Update Test movie 9",
                "movieFileName" : "Test9.mov",
                "moviePositionInChapter" : "2"
                },
                {
                "movieIDnum" : " 173273474",
                "movieName" : "Update Test movie 10",
                "movieFileName" : "Test10.mov",
                "moviePositionInChapter" : "3"
                }
            ]
        },
        {
            "ChapterName" : "What is an Update?",
            "chapterNum" : "4",
            "movies" : [
                {
                "movieIDnum" : " 177342131",
                "chapterNum" : "4",
                "chapterName" : "What is an Update?",
                "movieName" : "Test movie again",
                "movieFileName" : "Test13.mov",
                "moviePositionInChapter" : "1"
                }
                ]
        },
        {
            "ChapterName" : "Editing",
            "chapterNum" : "5",
            "movies" : [
                {
                "movieIDnum" : " 173290878",
                "movieName" : "Update Test movie 14",
                "movieFileName" : "Test14mov",
                "moviePositionInChapter" : "1"
                },
                {
                "movieIDnum" : " 177344914",
                "movieName" : " Movie 15 Test",
                "movieFileName" : "Test233.mov",
                "moviePositionInChapter" : "2"
                }
            ]
        }
    ];

    var result = template(data);
    document.write(result);

</script>
</html>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

25941 次

最近记录：

6 年，10 月 前
相关归档
在为Google Analytics生成配置文件时,无法选择其他Google Analytics帐户 26
将数据从Django传递到D3 21
Django - 异常处理最佳实践并发送自定义错误消息 20
如何在android中解析JSONArray 19
是什么导致 JsonException: JSON 值无法转换？ 14
Hook OData的$ metadata响应并将其从XML转换为JSON 11
Jekyll - 与HTML文件一起生成JSON文件 10
Set-Cookie Header位于响应中,但浏览器未在下一个请求中设置Cookie 9
JS 无法解析带有 unicode 字符的 JSON 8
使用JSON.NET反编译IOrderedEnumerable <T> 7
难疑归档
如何在本地和远程删除Git分支？ 16311
使用Git将我的最后一次X提交压缩在一起 3294
从Git中的分支中删除提交 3035
在函数中使用全局变量 2939
在一行中初始化ArrayList 2626
Vim清除上次搜索突出显示 1824
如何在Python中通过索引从列表中删除元素？ 1381
type()和isinstance()之间有什么区别？ 1163
如何初始化静态地图？ 1084
参考 - 这个错误在PHP中意味着什么？ 1071