把手嵌套的“每个"语法 - 不迭代每个元素 [英] Handlebars nested 'each' syntax - not iterating over each element
问题描述
我是 Javascript/JSON/Handlebars 方面的新手，我在获取具有两个嵌套级别的 JSON 对象以在 Handlebars 模板中工作时遇到了问题.
I am brand new at this Javascript/JSON/Handlebars thing, and I am having trouble getting a JSON object, with two nested levels, to work in a Handlebars template.
我已经用 JSONLint 验证了 JSON 对象，所以它是有效的 JSON 代码，但我不知道我是否有正确的 JSON 格式来使模板正常工作.:)(我正在另一个系统中手动构建 JSON.)或者可能是我不正确的模板语法.这就是我希望找出的...
I have validated the JSON object with JSONLint, so it is valid JSON code, but I don't know if I have the correct JSON format to make the template work correctly. :) (I am building the JSON manually in another system.) Or perhaps it is the syntax of the template that I have incorrect. That's what I hope to find out...
简短描述:这个对象是一个目录.我有章节，然后是每个章节中的电影.所以电影是每个章节元素的嵌套元素.
The short description: this object is a table of contents. I have Chapters and then the movies within each Chapter. So the Movies are nested elements of each Chapter element.
我希望 HTML 输出类似于:
I want HTML output similar to:
Chapter1: ChapterName
Movie1: MovieName
Movie2: MovieName
Chapter2: Chaptername
Movie1: MovieName
Movie2: MovieName
Movie3: MovieName
我似乎最终只有 1 个数据实例(我的 JSON 对象中的最后一个元素)，或者我什么也得不到.(取决于我尝试的小调整或版本.)浏览器控制台没有显示任何错误.
I seem to end up with only 1 instance of the data (the last element in my JSON object), or I get nothing at all. (Depends on which little tweak or version I try.) The browser console doesn't show any errors.
这是我迄今为止尝试使用的所有代码(脚本、HTML、模板等):
Here's all the code that I have been trying to use so far (scripts, HTML, template, etc):
<!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>
我想知道为什么这不起作用，而不仅仅是这是使用 4 种完全不同格式的其他不同事物来解决您的问题的方法".我的理解是，这应该适用于我尝试使用的工具.我想更好地了解这些工具并从中学习，而不仅仅是获得解决方案.(你知道，教一个人钓鱼...... :) )
I would like to know why THIS doesn't work, not just a "Here's how to solve your problem using 4 other different things in a totally different format". It is my understanding that this SHOULD be workable with the tools I am trying to use. I would like to better understand these tools and learn from the process, not just get a solution. (You know, teach a man to fish... :) )
谢谢，J
推荐答案
有几个改动建议，首先你不应该写一个有多个键的对象 { Chapter:, Chapter: 等..}
There are a couple of changes to suggest, first you shouldn't write an object with several keys { Chapter:, Chapter:, etc...}
另一个建议是检查 Handlebars 的工作方式，并不是在每种情况下都需要每个.希望它澄清.
The other suggestion is to review the way Handlebars works, it doesn't need each in every case. Hope it clarifies.
尝试这些更改:
<!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>
这篇关于把手嵌套的“每个"语法 - 不迭代每个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
