无法使用 Handlebars JS 和 Ember JS 循环遍历嵌套的 JSON 数组(大写属性) [英] Unable to loop through nested JSON array ( uppercase properties ) with Handlebars JS with Ember JS
问题描述
我正在学习 Ember JS 和 Handlebars JS,所以我对此很陌生.
我在尝试遍历嵌套的 JSON 数组时遇到问题.我无法遍历下面 JSON 中的页面".
这是 JSON:
<代码>{页面":[{身份证":1,"名称": "第 1 页",对象":[{宽度":100,高度":200,类型":形状"},{宽度":150,身高":250,类型":图像"}]},{身份证":2,"名称": "第 2 页",对象":[]}],设置":{"URL": "http://THEURL",位置":真实,导航":true},身份证":1,"Title": "标题",说明":说明"}
这是我的车把模板:
另外,当我添加:
{{Pages}}
在把手模板中,浏览器中的输出为:
[object Object],[object Object]
我不确定这是否是问题所在.
大写变量被认为是全局范围,你需要完全限定它们或将它们变成小写
http://emberjs.jsbin.com/UhIGevUf/1/edit
<div class="row"><h1>{{model.Title}}</h1><!-- 这有效--><h2>{{model.Description}}</h2><!-- 这有效--><!-- 这不起作用:--><ul>{{#model.Pages 中的每个页面}}<li>页面 ID:{{page.Id}} <br/>页面名称:{{page.Name}}
<ul>{{#page.Objects 中的每个 obj}}<li>{{obj.Type}}</li>{{/每个}}{{/每个}}
I am learning Ember JS and Handlebars JS so I am very new to this.
I am having an issue trying to loop through nested JSON array's. I am unable to loop through the 'Pages" in the JSON below.
Here is the JSON:
{
"Pages": [
{
"Id": 1,
"Name": "Page 1",
"Objects": [
{
"Width": 100,
"Height": 200,
"Type": "Shape"
},
{
"Width": 150,
"Height": 250,
"Type": "Image"
}
]
},
{
"Id": 2,
"Name": "Page 2",
"Objects": [
]
}
],
"Settings": {
"URL": "http://THEURL",
"Location": true,
"Navigation": true
},
"Id": 1,
"Title": "The Title",
"Description": "The Description"
}
This is my handlebars template:
<script type="text/x-handlebars" id="pages">
<div class="container">
<div class="row">
<h1>{{Title}}</h1> <!-- This works -->
<h2>{{Description}}</h2> <!-- This works -->
<!-- This doesn't work: -->
<ul>
{{#each Pages}}
<li>Page ID: {{Id}} <br /> Page Name: {{Name}} <br />
<ul>
{{#each Objects}}
<li>{{Type}}</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
</div>
</div>
</script>
Also, when I just add:
{{Pages}}
in the handlebars template, the output in the browser is:
[object Object],[object Object]
I am not sure if that is the issue or not.
Uppercase variables are considered global scope, you need to fully qualify them or make them lowercase
http://emberjs.jsbin.com/UhIGevUf/1/edit
<div class="container">
<div class="row">
<h1>{{model.Title}}</h1> <!-- This works -->
<h2>{{model.Description}}</h2> <!-- This works -->
<!-- This doesn't work: -->
<ul>
{{#each page in model.Pages}}
<li>Page ID: {{page.Id}} <br /> Page Name: {{page.Name}} <br />
<ul>
{{#each obj in page.Objects}}
<li>{{obj.Type}}</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
</div>
</div>
这篇关于无法使用 Handlebars JS 和 Ember JS 循环遍历嵌套的 JSON 数组(大写属性)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!