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

Question

我试图从我的控制器返回我的数组的第一个元素作为我的模板的计算属性.我的代码如下.我100%关于我的数组和模板.问题是我在控制器中的语法.基本上我的数组是由Work对象组成的作品.理想情况下,我会返回第一个元素Work.这甚至可以在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')
});

// template works.js

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

// route works.js

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;
  }


});

Answer 1

这会奏效.

很长的路(只是为了改善您的计算属性代码):

// controller work.js
import Ember from "ember";
export default Ember.Controller.extend({
  firstElement: function () {
    return this.get('model').get('firstObject'); // or this.get('model.firstObject'); 
  }.property('model.[]')
});

1)你设置works为model路线,所以你可以model在控制器中得到它

2).property(model.[])表示数组上的计算属性,因此添加和删除数组元素将触发更新.您也可以选择一些特定的属性,即.property(model.@each.modelProperty)

3)fistObject是正确的方法(不是[0]),因为您正在使用Ember.ArrayProxy,请参阅http://emberjs.com/api/classes/Ember.ArrayProxy.html

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

懒惰的方式:

1)在路由中将模型设置为数组或在数组中解析promise

// 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 --}}

更新:使用适当的迭代语法http://ef4.github.io/liquid-fire/#/helpers/liquid-with/10

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