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

这样可行。

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

works

1）您在路由中将model设置为model，因此您可以在控制器中将其设为.property(model.[])

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

3）[0]是正确的方法（不是// works = ... as is export default Ember.Route.extend({ model: function() { return works; } });），因为您正在使用Ember.ArrayProxy，请参阅http://emberjs.com/api/classes/Ember.ArrayProxy.html

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

懒惰：

1）在路由中将模型设置为数组或在数组

中解析的promise

model.firstObject

2）直接在模板中获取//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}}

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

[dependencies]
crate = "1.0.0"  # I think this is an exact version match
crate = "^1.0.0" # I think this means "use that latest 1.x.x"
crate = "*"      # I think this means "use the latest"

Answer 2

更新（或不同）的示例

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

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

或者如果您想要双向数据流（可以设置firstElement）

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

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

从Ember控制器子类

2 个答案: