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
Vous devez vous connecter pour publier un commentaire.
il y a quelques changements à proposer, d'abord, vous ne devriez pas écrire un objet avec plusieurs touches { Chapitre: Chapitre:, etc...}
L'autre suggestion est d'examiner la façon la Guidon œuvres, il n'est pas nécessaire dans chaque cas. Espérons qu'il précise
Essayez ces changements:
Devraient avoir dit le nécessaire, merci pour la clarification. Je préfère en général utiliser #collection au lieu de les itérateurs.
Oh oui, ça a du sens.
Ah, fait sens. Je pense que j'avais jeté les "Chapitres" de l'objet là pour donner le "chacun" de la fonction de quelque chose à saisir. I. e". pour chaque objet-signe-'Chapitre'...". Enlevé le même label chose comme vous l'avez suggéré, et modifié mon template et il est aujourd'hui. Merci!
Vous avez fait un très beau travail de répondre, en restant avec ma demande de trouver cette méthode. Désolé, mais je ne peux pas donner votre réponse accessoires, car je n'ai pas les représentants.
OriginalL'auteur pdjota
pdjota est à droite sur. Cette réponse, c'est juste pour montrer comment utiliser le chaque bloc aide si vous le souhaitez.
Comme pdjota judicieusement souligné, vous l'écrasez les éléments de votre objet, car ils ont tous la même clé, c'est à dire, "Chapitre". C'est donc au tour
data
en un tableau d'objets au lieu d'un objet d'objets qui ont la même clé.Si vous le faites, vous pouvez toujours passer
data
entemplate()
. Ce qu'il vous manque a été manière de faire référence aux propriétés des objets utilisés dans la chaque bloc. C'est fait avecthis
. Par exemple, si vous êtes dans les films d'itérateur, les propriétés des films de l'objet sont référencés comme ceci:this.movieIDnum
,this.movieName
, etc.<script id="modèle2" type="text/x-guidon-modèle"> <div>Chapitre choses:</div> <ul> {{#chaque ce}} <ul>{{@index}} {{ChapterName}} {{#films}} <li>{{@index}} + 1 {{moviePositionInChapter}} L'ID du film:{{movieIDnum}} Nom du Film: {{movieName}} nom de fichier: {{movieFilename}}</li> {{/films}} </ul> {{les/chacun}} </ul> </script>
Vous avez fait un très beau travail de répondre, en restant avec ma demande de trouver cette méthode. Désolé, mais je ne peux pas donner votre réponse accessoires, car je n'ai pas les représentants.
pas de problème. Heureux, il a aidé.
OriginalL'auteur Tayler