无法使用Ember JS的Handlebars JS循环嵌套JSON数组（大写属性） [英] Unable to loop through nested JSON array ( uppercase properties ) with Handlebars JS with Ember JS

问题描述

我正在学习Ember JS和Handlebars JS，所以我很新的。

我有一个问题，试图循环嵌套的JSON数组。我无法循环通过JSON中的页面。

这是JSON：

  {
Pages：[
 {
Id：1，
Name：第1页，
对象：[
 {
宽度：100，
高度：200，
类型：形状
}，
 {
宽度：150，
高度：250，
类型：图像
} 
] 
} 
 {
Id：2，
名称：第2页，
对象：[
 
] 
 
]，
设置：{
URL：http：// THEURL，
位置：true，
导航 
}，
Id：1，
标题：标题，
描述：描述
} 
  

这是我的手柄模板：

 < script type =text / x-handlebarsid =pages> 
< div class =container> 
< div class =row> 
< h1> {{Title}}< / h1> <！ - 这个工程 - > 
< h2> {{Description}}< / h2> <！ - 这个工程 - > 
 
<！ - 这不工作： - > 
< ul> 
 {{#each Pages}} 
< li>页面ID：{{Id}}< br />页面名称：{{Name}}< br /> 
< ul> 
 {{#each Objects}} 
< li> {{Type}}< / li> 
 {{/ each}} 
< / ul> 
< / li> 
 {{/ each}} 
< / ul> 
 
< / div> 
< / div> 
< / script> 
  

另外，当我添加：

<$在句柄模板中，p $ p> {{Pages}}


浏览器中的输出是：

  [object Object]，[object Object] 
  

我不知道这是否是问题。

解决方案

大写变量被认为是全局范围，您需要对它们进行完全限定或者使其小写

http://emberjs.jsbin.com/UhIGevUf/1/edit

 < div class =container> 
< div class =row> 
< h1> {{model.Title}}< / h1> <！ - 这个工程 - > 
< h2> {{model.Description}}< / h2> <！ - 这个工程 - > 
 
<！ - 这不工作： - > 
< ul> 
 {{＃在model.Pages中的#each页面}} 
< li>页面ID：{{page.Id}}< br />页面名称：{{page.Name}}< br /> 
< ul> 
 {{#each obj in page.Objects}} 
< li> {{obj.Type}}< / li> 
 {{/ each}} 
< / ul> 
< / li> 
 {{/ each}} 
< / ul> 
 
< / div> 
< / div> 
  

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>

这篇关于无法使用Ember JS的Handlebars JS循环嵌套JSON数组（大写属性）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！