如何通过 Ember 中的索引访问模型数组

Question

我无法通过模板中的索引访问 EmberArray。这是我路线的一部分

model(){
  return RSVP.hash({
    games: this.store.findAll('game')
  })
}

这是模板的一部分

<div>
  First game: {{model.games.[0].name}}
</div>

没有呈现输出。尽管如果我使用

对其进行迭代

{{#each model.games as |game|}}
  <div>{{game.name}}</div>
{{/each}}

这很好用。知道我可能做错了什么，或者我应该做些什么不同的事情吗？

谢谢

Answer 1

您可以使用 firstObject 方法。

{{model.games.firstObject.name}}

Answer 2

如果您不想遍历所有项目并且不介意直接在模板中编写一些逻辑，ember-composable-helpers addon might come useful, for example accessing a concrete item in a given array using object-at，来自文档：

Returns the object at the given index of an array.

符号：

{{object-at index array}}

其中（如果您想显示第二项的名称）将是：

{{object-at 1 model.games}}

Answer 3

您可以创建一个助手。像这样：

// app/helpers/array-index.js
import Ember from 'ember';

export default Ember.Helper.helper(function ([array, index]) {
  return array !== undefined && array[index] !== undefined ? array[index] : undefined;
});

与get一起使用：

{{get (array-index model.games 1) 'name'}}

P.S。当我们谈论从 Ember 数据返回的集合时，它可能不是纯 js 数组，而是类似于 ArrayProxy 的东西。在这种情况下，您可能需要使用它的方法 objectAt:

// app/helpers/array-index.js
import Ember from 'ember';

export default Ember.Helper.helper(function ([array, index]) {
  return array && array.objectAt ? array.objectAt(index) : (array && array[index]);
});

如何通过 Ember 中的索引访问模型数组

How to access model array by index in Ember

ember.js

ember-data

ember-model