json 把手嵌套的“每个”语法 - 不迭代每个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17197731/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Handlebars nested 'each' syntax - not iterating over each element
提问by Cronk
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.
我是 Javascript/JSON/Handlebars 方面的新手，我在获取具有两个嵌套级别的 JSON 对象以在 Handlebars 模板中工作时遇到了问题。
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...
我已经用 JSONLint 验证了 JSON 对象，所以它是有效的 JSON 代码，但我不知道我是否有正确的 JSON 格式来使模板正常工作。:)（我正在另一个系统中手动构建 JSON。）或者可能是我不正确的模板语法。这就是我希望找出的...
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.
简短描述：这个对象是一个目录。我有章节，然后是每个章节中的电影。所以电影是每个章节元素的嵌套元素。
I want HTML output similar to:
我想要类似于以下内容的 HTML 输出：
Chapter1: ChapterName
Movie1: MovieName
Movie2: MovieName
Chapter2: Chaptername
Movie1: MovieName
Movie2: MovieName
Movie3: MovieName
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.
我似乎最终只有 1 个数据实例（我的 JSON 对象中的最后一个元素），或者我什么也得不到。（取决于我尝试的小调整或版本。）浏览器控制台没有显示任何错误。
Here's all the code that I have been trying to use so far (scripts, HTML, template, etc):
这是迄今为止我一直尝试使用的所有代码（脚本、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>
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... :) )
我想知道为什么这不起作用，而不仅仅是“这是使用完全不同格式的其他 4 种不同事物来解决您的问题的方法”。我的理解是，这应该适用于我尝试使用的工具。我想更好地了解这些工具并从中学习，而不仅仅是获得解决方案。（你知道，教一个人钓鱼...... :) ）
Thanks, J
谢谢，J
回答by pdjota
There are a couple of changes to suggest, first you shouldn't write an object with several keys { Chapter:, Chapter:, etc...}
有几个变化建议，首先你不应该写一个有多个键的对象 { Chapter:, Chapter:, etc...}
The other suggestion is to review the way Handlebars works, it doesn't need each in every case. Hope it clarifies.
另一个建议是检查 Handlebars 的工作方式，并不是在每种情况下都需要每个。希望它澄清。
Try these changes:
尝试以下更改：
<!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>
回答by Tayler
pdjota is right on. This answer is just to show how to use the each block helper if you wanted.
pdjota 是正确的。这个答案只是为了展示如何使用 each block helper（如果需要）。
Like pdjota wisely pointed out, you are overwriting the elements of your object because they all have the same key i.e., "Chapter". So turn datainto an array of objects instead of an object of objects that have the same key.
就像 pdjota 明智地指出的那样，您正在覆盖对象的元素，因为它们都具有相同的键，即“章节”。所以data变成一个对象数组，而不是一个具有相同键的对象的对象。
If you do that, you can still pass datainto template(). What you were missing was how to reference properties of objects used in the each block. That is done with this. For example, if you are in the movies iterator, properties of the movies object are referenced like this: this.movieIDnum, this.movieName, etc.
如果你这样做，你仍然可以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>
