Question

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

{{#each this}}

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

{{/each}}

但是，我还想在记录集中显示第一个图像。经过How do I access an access array item by index in handlebars?我添加了以下内容但没有运气。

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

我也试过以下但没有运气。

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

有什么想法吗？

知名人士：Ember 1.2.0，Handlebars 1.2.0，jQuery 1.10.2

Answer 1

如果您转到Try Handlebars.js并添加到句柄模板 {{this.0.img}}和上下文（JavaScript文字或JSON）

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

它的工作。你帮手可能有问题。

Answer 2

似乎有效：

模板：

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

JS：

App = Ember.Application.create();

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return [
             [
               {imageURL: "http://placehold.it/100x100"},
               {imageURL: "http://placekitten.com/200/200"}
             ], 
             [
               {imageURL: "http://placehold.it/200x200"},
               {imageURL: "http://placekitten.com/100/100"}
             ],
             [
               {imageURL: "http://placehold.it/300x300"},
               {imageURL: "http://placekitten.com/300/300"}
             ]
           ];
  }
});

JSBin example

Answer 3

这不起作用的原因是因为this引用了呈现此模板的ArrayController。现在你可能想知道为什么{{#each this}}有效。这是因为Ember将获得数组控制器的content属性，这是一个包含实际图像对象的Ember.Array。

请阅读Ember.ArrayController上的此文档：http://emberjs.com/api/classes/Ember.ArrayController.html。

为了显示第一张图像，您可以扩展控制器，如下所示：

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

你必须使用this.get('firstObject')，因为Ember.Array与普通的js数组有点不同。在这里，您可以找到更多文档：http://emberjs.com/api/classes/Ember.Array.html#property_firstObject。

现在可以轻松地在模板中显示第一个图像：

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

把手阵列元素在此

3 个答案: