javascript - return first element from array as computed property from Ember controller subclass -
i trying return first element of array computed property template controller. code below. 100% array , template. problem syntax in controller. array works made of work objects. , ideally return first element work. possible in javascript?
best.
//controller works.js
import ember "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 |currentmodel|}} {{firstelement}} {{/liquid-with}} </div>
//route works.js
import ember '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 iphone app explores storytelling in own format. 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; } });
this work.
long way (just improve computed property code):
// controller work.js import ember "ember"; export default ember.controller.extend({ firstelement: function () { return this.get('model').get('firstobject'); // or this.get('model.firstobject'); }.property('model.[]') });
1) set works
model
in route, model
in controller
2) .property(model.[])
means computed property on array, adding , deleting array element fire update. choose specific property i.e. .property(model.@each.modelproperty)
3) fistobject
proper method (not [0]
), since working ember.arrayproxy, see http://emberjs.com/api/classes/ember.arrayproxy.html
4) use {{firstelement}} in template
lazy way:
1) set model in route array or promise resolved in array
// works = ... export default ember.route.extend({ model: function() { return works; } });
2) model.firstobject
in directly in template
//template works {{model.firstobject}} {{!-- first object of model array --}} {{model.firstobject.name}} {{!-- name of first object --}}
update: use proper iteration syntax http://ef4.github.io/liquid-fire/#/helpers/liquid-with/10
{{#liquid-with model currentmodel}} {{currentmodel.firstobject.name}} {{/liquid-with}}
Comments
Post a Comment