Accessing model data members in action? Need cast? - ember.js

Question

This must be a simple concept, but it seems to be assumed rather than covered...
I have a simple model, journal, and component, journal-list:
<select class="form-control" id="journal" onchange={{action 'showJournal' value="target.value"}} >
<option value="" disabled="disabled" selected="selected">Periodicals:</option>
{{#each model as |journal|}}
<option value="{{journal}}"> {{journal.name}}</option>
{{/each}}
</select>
and action:
import Ember from 'ember';
export default Ember.Component.extend({
editstate: Ember.inject.service('edit-state'),
actions: {
showJournal(journal) {
this.get('editstate').selectedJournal = journal;
alert('got ' + journal.name);
this.sendAction('displayJournal', journal);
}
}
});
That selected value is not, as far as I can tell, useful, and the journal instance in the action isn't either. Ember knows it's type Journal (e.g. <em-journalapp#model:journal::ember385:3>), but I can't access the members via, e.g., journal.name, journal.get('name') or anything else I've thought of.
I can pass in journal.id instead, and see it. But if I look up the model from the store, the variable again isn't useful.
Is there some magic to casting or storing model data in variables and getting it back out?

Answer 1

I will encourage you to use ember-power-select addon.
When you say <option value="{{journal}}"> this will be rendered in html like <option value="[object object]"> you can't store object for html attribute.
So you need to include the id like this <option value={{journal.id}}> you can get the selected object through findBy method from options list.
Created this twiddle for this.
application.hbs
<select class="form-control" id="journal" onchange={{action 'showJournal' value="target.value"}} >
<option value="" disabled="disabled" selected={{unless editState.selectedJournal.id 'selected'}}>Periodicals:</option>
{{#each model as |journal|}}
<option value={{journal.id}} selected={{if (eq editState.selectedJournal.id journal.id) 'selected'}}> {{journal.name}}</option>
{{/each}}
</select>
application.js route file,
import Ember from 'ember';
export default Ember.Route.extend({
model(){
return [{id:'1',name:'BBC'},{id:'2',name:'TV'}];
}
});
application.js controller file,
import Ember from 'ember';
export default Ember.Controller.extend({
editState: Ember.inject.service(),
appName: 'Ember Twiddle',
actions: {
showJournal(journalId) {
this.set('editState.selectedJournal',this.get('model').findBy('id',journalId));
console.log('Yes ',this.get('editState.selectedJournal'));
}
}
});
As you maintained state is service so I also did it.
edit-state.js service file
import Ember from 'ember';
export default Ember.Service.extend({
selectedJournal:{},
});