Я совершенно новый в этом Javascript/JSON/Handlebars, и мне трудно получить объект JSON с двумя вложенными уровнями для работы в шаблоне Handlebars.
Я проверил объект JSON с JSONLint, поэтому он является допустимым кодом JSON, но я не знаю, есть ли у меня правильный формат JSON, чтобы заставить шаблон работать правильно.:) (Я строю JSON вручную в другой системе.) Или, возможно, это синтаксис шаблона, который у меня неправильный. Это то, что я надеюсь узнать...
Краткое описание: этот объект является оглавлением. У меня есть главы, а затем фильмы в каждой главе. Поэтому фильмы являются вложенными элементами каждого элемента главы.
Я хочу, чтобы вывод HTML был похож на:
Chapter1: ChapterName
Movie1: MovieName
Movie2: MovieName
Chapter2: Chaptername
Movie1: MovieName
Movie2: MovieName
Movie3: MovieName
Кажется, что у меня только 1 экземпляр данных (последний элемент в моем объекте 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>
Я хотел бы знать, почему ЭТО не работает, а не просто "Здесь, как решить вашу проблему, используя 4 разные вещи в совершенно другом формате". Насколько я понимаю, это СЛЕДУЕТ работать с инструментами, которые я пытаюсь использовать. Я хотел бы лучше понять эти инструменты и извлечь уроки из процесса, а не просто получить решение. (Знаете, научите человека ловить рыбу...:))
Спасибо, J