我试图将数组的第一个元素作为计算属性从控制器返回给模板。我的代码如下。我对阵列和模板的了解是100％。问题是我在控制器中的语法。基本上，我的数组是由Work对象组成的作品。我最好返回第一个元素Work。在javascript中甚至有可能吗？
最好。
//控制器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>
//路由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;
}
});
这会起作用。
很长的路要走（只是为了改善您的计算属性代码）：
// 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([email protected])
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}}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句