Guidon imbriquée "chacun" à la syntaxe du pas d'itération sur chaque élément

Je suis tout nouveau chez ce Javascript/JSON/Guidon chose, et je vais avoir du mal à obtenir un objet JSON, avec deux niveaux imbriqués, de travailler dans un Guidon de modèle.

J'ai validé l'objet JSON avec JSONLint, de sorte qu'il est valide code JSON, mais je ne sais pas si j'ai le bon format JSON pour que le modèle fonctionne correctement. 🙂 (Je suis la construction de l'JSON manuellement dans un autre système.) Ou c'est peut-être la syntaxe du modèle que j'ai incorrect. C'est ce que j'espère découvrir...

La courte description: cet objet est une table des matières. J'ai Chapitres et ensuite les films à l'intérieur de chaque Chapitre. Si les Films sont des éléments imbriqués de chaque élément Chapitre.

Je veux de la sortie HTML similaires à:

Chapter1:  ChapterName
       Movie1: MovieName
       Movie2: MovieName
Chapter2:  Chaptername
       Movie1: MovieName
       Movie2: MovieName
       Movie3: MovieName

Me semble que 1 instance de données (le dernier élément de mon objet JSON), ou je ne reçois rien du tout. (Dépend de peu de tweak ou la version que j'ai essayer.) Le navigateur de la console n'affiche pas les erreurs.

Voici tout le code que j'ai essayé de l'utiliser jusqu'à présent (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>

Je voudrais savoir pourquoi CELA ne fonctionne pas, pas juste un "Voici comment faire pour résoudre votre problème à l'aide de 4 autres choses différentes dans un tout autre format". C'est ma compréhension que cela DEVRAIT être réalisable avec les outils que j'suis en train d'utiliser. Je voudrais mieux comprendre ces outils et d'apprendre du processus, et pas seulement d'obtenir une solution. (Vous savez, apprendre à un homme à pêcher... 🙂 )

Grâce,
J

OriginalL'auteur Cronk | 2013-06-19