无法从句柄栏模板访问嵌套的JSON属性

时间:2014-01-13 16:28:01

标签: ember.js handlebars.js

使用HandleBar的js,我已经使用它几天了,但我遇到了问题。

基本上我有以下json数据:

{
   "id":1009,
   "parent_id":1007,
   "template":"blog-post",
   "path":"/blog-post/another-test-blog-post/",
   "name":"another-test-blog-post",
   "created":1389310922,
   "modified":1389371901,
   "created_users_id":41,
   "modified_users_id":41,
   "title":"Another Test Blog Post",
   "headline":null,
   "summary":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis lectus dui. ",
   "image_caption":"Another Image Caption",
   "images":{
      "blog-sample-image-medium.png":{
         "basename":"blog-sample-image-medium.png",
         "description":"",
         "tags":"",
         "formatted":true,
         "modified":1389352919,
         "created":1389352919
      }
   },
   "sub_heading":"Another Sub Heading"
}

这是有效的数据,我能够获取参数并在我的手柄栏模板中显示。但是,我无法访问“图像”中的属性,我也尝试了各种技术,但我无法这样做。以下是我的模板的一部分:

      {{#each item in model}}

        <div class="media-element" {{#ifIsNthItem nth=3}} style="margin-right: 0px;" {{/ifIsNthItem}}>

            <div style="skyiq-element-icon blog-element">
            </div>

            <div class="media-main-image grayscale" style="">




            </div>
            <p class="sub-heading">{{item.title}}</p>
            <ul>
              <li><a href="#"><i aria-hidden="true" class="skycon-user-profile"></i> By Liam Powell</a></li>
              <li><i aria-hidden="true" class=" skycon-info"></i> 02/Dec/2013</li>
            </ul>
            <p>{{{item.summary}}}</p>
            <a href="#blog" class="skyiq-read-more">read more</a>
            <div class="skyiq-line"></div>
            <a href="#" class="skyiq-share-link"><i class=" skycon-share" aria-hidden="true"></i> Share</a>
          </div> 
      {{/each}}

所以参数如item.summary显示但我无法显示item.images.1.basename。

任何帮助或正确方向上的一点都会有很大的帮助。

提前致谢

1 个答案:

答案 0 :(得分:1)

三件事:

1)你这样访问它的方式:{{item.images.1.basename}}让我觉得你想把图像视为数组。您不能像在javascript中那样使用手柄中的索引号访问数组中的项目。 Ember在数组上提供名为firstObjectlastObject的辅助属性,使您可以访问数组的第一个和最后一个对象。但是,在您布置的情况下,没有secondObject看起来像您想要的那样。通常,您访问数组中元素的方式是使用{{#each}}迭代它们。

2)在您发布的JSON中,images不是数组而是对象。因此,您可以像这样访问其中的项目:{{item.images.blog-sample-image-medium.png.basename}}

3)Ember很可能不喜欢对象键blog-sample-image-medium.png中有一个句点的事实,因为这是它在访问下一个对象时的计算方式。您应该尝试弄清楚如何从键名称中获取句号。