把手嵌套“每个”语法 - 不是遍历每个元素 [英] Handlebars nested 'each' syntax - not iterating over each element

查看：77
本文介绍了把手嵌套“每个”语法 - 不是遍历每个元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在这个Javascript / JSON / Handlebars中，我是全新的，并且我无法使用两个嵌套级别的JSON对象在Handlebars模板中工作。



我用JSONLint验证了JSON对象，所以它是有效的JSON代码，但我不知道是否使用了正确的JSON格式来使模板正常工作。 :)（我正在另一个系统中手动构建JSON）。或者，这可能是模板的语法错误。这就是我希望找到的......



简短描述：这个对象是一个目录。我有章节，然后是每章中的电影。因此，电影是每个章节元素的嵌套元素。



我希望HTML输出类似于： 

  Chapter1：章节名称
 Movie1：MovieName 
 Movie2：MovieName 
第2章：章节名称
 Movie1：MovieName 
 Movie2：MovieName 
 Movie3 ：MovieName

我似乎最终只有1个数据实例（我的JSON中的最后一个元素对象），或者我什么也得不到。 （取决于我尝试使用哪个小调整或版本。）浏览器控制台不显示任何错误。



以下是我一直试图使用的所有代码（脚本，HTML，模板等）： 

 <！DOCTYPE html> 
< html> 
< head> < meta charset =UTF-8> 
< title> Handlebars Demo< / title> 
<！ - 依赖文件 - > 
< script src =Handlebars.js>< / script> 
< / head> 
 
 <！ -  template  - >> 
< script id =template2type =text / x-handlebars-template> 
< div>章节内容：< / div> 
< ul> {{每章节}} 
< ol> {{@ index}} {{ChapterName}} 
 {{#each电影}} 
< ; li>电影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）; 
Chapter：{
ChapterName：Introduction，
chapterNum：1，
movies：[ 
 {
movieIDnum：16244028，
movieName：更新测试影片0，
movieFileName：Test0.mov，
 moviePositionInChapter：1
} 
] 
}，
 
章节：{
章节名称：欢迎，
chapterNum：2，
movies：[
 {
movieIDnum：17322365，
movieName：Update Test movie 1 ，
movieFileName：Test1.mov，
moviePositionInChapter：1
}，
 {
m ovieIDnum：17326267，
movieName：更新测试影片3，
movieFileName：Test3.mov，
moviePositionInChapter：2
 
 
 
 $ b $章节：{
章名：新界面，
chapterNum：2 ，
movies：[
 {
movieIDnum：1732123476，
movieName：更新测试电影12，
movieFileName ：Test12.mov，
moviePositionInChapter：1
}，
 {
movieIDnum：173262373，
movieName：更新测试电影9，
movieFileName：Test9.mov，
moviePositionInChapter：2
}，
 {
movieIDnum： 17 3273474，
movieName：更新测试电影10，
movieFileName：Test10.mov，
moviePositionInChapter：3
} $ b 
 $ b，
 
章节：{
章节名称：什么是更新？，
chapterNum：4， 
movies：[
 {
movieIDnum：177342131，
chapterNum：4，
chapterName：什么是更新？，
movieName：再次测试电影，
movieFileName：Test13.mov，
moviePositionInChapter：1
} 
 $ b章节：{
章节名称：编辑，
chapterNum：5，
电影： [
 {
movieIDnum：173290878， 
movieName：更新测试电影14，
movieFileName：Test14mov，
moviePositionInChapter：1
}，
 {
movieIDnum：177344914，
movieName：电影15测试，
movieFileName：Test233.mov，
moviePositionInChapter：2 
} 
] 
} 
 
} 
 
 var result = template（data）; 
 document.write（result）; 
 
< / script> 
< / html>

我想知道为什么THIS不起作用，而不仅仅是以下是如何解决您的问题以另一种完全不同的格式使用其他4种不同的东西。这是我的理解，这应该可以与我尝试使用的工具一起使用。我想更好地理解这些工具并从过程中学习，而不仅仅是获得解决方案。 （你知道，教一个男人钓鱼... :)）

谢谢，
J

解决方案

有几处修改建议，首先你不应该用几个键{Chapter :, Chapter :, etc ...}写一个对象
另一个建议回顾Handlebars的工作方式，在每种情况下都不需要每一种。希望它澄清
尝试这些更改： 

 <！DOCTYPE html> 
< html> 
< head> < meta charset =UTF-8> 
< title> Handlebars Demo< / title> 
<！ - 依赖文件 - > 
< script src =handlebars.js>< / script> 
< / head> 
 
 <！ -  template  - >> 
< script id =template2type =text / x-handlebars-template> 
< div>章节内容：< / div> 
< ul> {{＃章节}} 
< ol> {{@ index}} {{ChapterName}} 
 {{#movies}} 
< li> ;电影ID：{{movieIDnum}}< / li> 
 {{/ movies}} 
< / ol> 
 {{/章节}} 
< / 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：更新测试影片0，
movieFileName：Test0.mov，
moviePositionInChapter： 1
} 
] 
}，
 {
章名：欢迎，
chapterNum：2，
movies：[
 {
movieIDnum：17322365，
movieName：更新测试电影1，
movieFileName：Test1。 mov，
moviePositionInChapter：1
}，
 {
movieIDnum：17326267，
 movieName：更新测试电影3，
movieFileName：Test3.mov，
moviePositionInChapter：2
} 
] 
 }，
 {
ChapterName：新界面，
chapterNum：2，
电影：[
 {
movieIDnum：1732123476，
movieName：更新测试电影12，
movieFileName：Test12.mov，
moviePositionInChapter：1
 $ bmovieIDnum：173262373，
movieName：更新测试电影9，
movieFileName：Test9.mov ，
moviePositionInChapter：2
}，
 {
movieIDnum：173273474，
movieName：Up日期测试电影10，
movieFileName：Test10.mov，
moviePositionInChapter：3
} 
] 
}，
 {
ChapterName：什么是更新？，
chapterNum：4，
电影：[
 {
movieIDnum ：177342131，
chapterNum：4，
chapterName：什么是更新？，
movieName：再次测试电影，
movieFileName：Test13.mov，
moviePositionInChapter：1
} 
] 
}，
 {
ChapterName ：Editing，
chapterNum：5，
movies：[
 {
movieIDnum：173290878，
movieName ：更新测试电影14，
movi eFileName：Test14mov，
moviePositionInChapter：1
}，
 {
movieIDnum：177344914，
movieName：电影15测试，
movieFileName：Test233.mov，
moviePositionInChapter：2
} 
] 
} 
] ; 
 
 var result = template（{章节：data}）; 
 document.write（result）; 
 
< / script> 
< / html>


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.

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.

I want HTML output similar to:

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.

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>

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... :) )

Thanks, J

解决方案

there are a couple of changes to suggest, first you shouldn't write an object with several keys { Chapter:, Chapter:, etc...} The other suggestion is to review the way Handlebars works, it doesn't need each in every case. Hope it clarifies 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>

这篇关于把手嵌套“每个”语法 - 不是遍历每个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆