Javascript 将数组中的第一个元素作为Ember控制器子类的计算属性返回

我试图将数组的第一个元素作为计算属性从控制器返回到模板。我的代码如下。我对我的数组和模板百分之百满意。问题是我在控制器中的语法。 基本上我的数组是由工作对象组成的。理想情况下，我会返回第一个元素的工作。这在javascript中可能吗

最好的

//controller works.js

import Ember from "ember";
  export default Ember.Controller.extend({
  firstElement: function () {
    var arr = this.get('model');
    return arr[0];
    console.log(arr[0]);
  }.property('Work')
});

//模板works.js

<div class="right">
  {{#liquid-with model as |currentModel|}}
    {{firstElement}}
  {{/liquid-with}}
</div>

import Ember from 'ember';

var Work = Ember.Object.extend({
  name: '',
  year: '',
  description:'',
  image:'',
  logo:'',

  work_id: function() {
    return this.get('name').dasherize();
  }.property('name'),


});

var minibook = Work.create({
  id: 1,
  name: 'MINIBOOK',
  year: '2014',
  description:'MiniBook is an iphone app that explores storytelling in its own format. The format',
  image:'assets/images/minibook_iphone.png',
  logo:'assets/images/minibook_logo.png'
});

var poetics = Work.create({
  id: 2,
  name: 'POETICS',
  year: '2013',
  description:'Lorem Ipsum Poetics',
  image:'assets/images/poetics_iphone.png',
  logo:'assets/images/poetics_logo.png'
});


var WorksCollection = Ember.ArrayProxy.extend(Ember.SortableMixin, {
  sortProperties: ['id'],
  sortAscending: true,
  content: []
 });


var works = WorksCollection.create();

works.pushObjects([poetics, minibook]);


export default Ember.Route.extend({
  model: function() {
    return works;
  }


});

这会奏效的

漫长的路（只是为了改进您的计算属性代码）：

1） 您可以在route中将

works

设置为

model

，这样您就可以在controller中将其设置为

model

2）

.property（model.[]）

表示数组上的计算属性，因此添加和删除数组元素将触发更新。您还可以选择一些特定的属性，即

.property（model.@each.modelProperty）

3）

fistObject

是正确的方法（而不是

[0]

），因为您使用的是Ember.ArrayProxy，请参阅

4） 您可以在模板中使用{{firstElement}}

懒惰的方式：

1） 将路由中的模型设置为数组或数组中解析的承诺

// works = ... as is
export default Ember.Route.extend({
  model: function() {
    return works;
  }
});

2） 直接在模板中获取

model.firstObject

//template works
{{model.firstObject}} {{!-- first object of model array --}}
{{model.firstObject.name}}  {{!-- name of first object --}}

更新： 使用正确的迭代语法

更新（或不同）一点的示例

或者，如果需要双向数据流（可以设置

firstElement

）

---

非常感谢你详细的回答。我从阅读这个回答中学到了很多，我很想把它当作真正的答案来接受。然而，当我尝试每种方法时，我在模板中分别放置了{{firstElement}或{{model.firstObject}时会出现错误。这很可能不是你的错：）这是我的全部作品的要点。以防万一。如果有任何指示，我将不胜感激。以懒散的方式，我是否需要更改我的路线？您的1）看起来与我当前返回数组的方式相同。我错过什么了吗？再次感谢你。你的迭代看起来很奇怪，我需要用谷歌搜索一下{{{{liquid with}}}的工作原理。我让它工作了。显然，我必须执行{{firstElement.name}}来摆脱未知的mixin错误。液体加上液体火真的能带来动画效果。非常感谢！太长，读不下去了访问余烬数据对象时，只需使用

.get（'firstObject'）

即可获取数组的第一项

//template works
{{model.firstObject}} {{!-- first object of model array --}}
{{model.firstObject.name}}  {{!-- name of first object --}}

{{#liquid-with model as currentModel}}
  {{currentModel.firstObject.name}}
{{/liquid-with}}

import Controller from '@ember/controller';
import { readOnly } from '@ember/object/computed';

export default Controller.extend({
  firstElement: readOnly('model.firstObject')
});

import Controller from '@ember/controller';
import { alias } from '@ember/object/computed';

export default Controller.extend({
  firstElement: alias('model.firstObject')
});