Javascript 此上的Handlebar数组元素

我已经设置了一个简单的把手模板来显示来自模型记录的图像。以下内容按预期工作，并在每个项目上使用imageURL来显示图像

{{#each this}}

<img {{bindAttr src="imageURL"}} >

{{/each}}

{{{#每个this}
{{/每个}}

但是，我还想显示记录集中的第一个图像。我无意中添加了以下内容

<img {{bindAttr src="this.0.imageURL"}} >

我也尝试了以下方法，但也没有成功

{{#with this.[0]}}
<img {{bindAttr src="imageURL"}} >
{{/with}}

{{#用这个[0]}
{{/与}}

有什么想法吗

注意事项：如果您转到并添加到把手模板

{{this.0.img}

和上下文（JavaScript文本或JSON）

[{
   img: 'path/to/img'
}, {
   img: 'path/to/img'
}]

它的工作。也许你的助手有问题

这似乎有效：

模板：

<script type="text/x-handlebars" data-template-name="index">
  <ul>
  {{#each this}}
    <img {{bindAttr src="this.0.imageURL"}} >
  {{/each}}
  </ul>
</script>

---

此操作不起作用的原因是

此

引用了呈现此模板的

ArrayController

。现在，您可能想知道为什么

{{{每个this}}

可以工作。这是因为Ember将获得数组控制器的

content

属性，该属性是包含实际图像对象的

Ember.array

请在Ember.ArrayController上阅读此文档：

为了显示第一个图像，您可以像这样扩展控制器：

App.IndexController = Ember.ArrayController.extend({
  firstImage: function() {
    this.get('firstObject');
  }.property('[]')
});

您必须使用

this.get（'firstObject'）

，因为Ember.Array的工作原理与普通的js数组略有不同。在这里，您可以找到更多文档：

现在，在模板中显示第一个图像变得很容易：

<img {{bindAttr src="firstImage.imageURL"}} />

---

谢谢你的帮助。我还发现以下方法也有效。

<img {{bindAttr src="firstImage.imageURL"}} />