I found this example in the forum and I have attempted to use it in my code below
//Example found
hbs ```{{modal-filter feature=feature property=someProperty}}``
compoenent
...
})```
Generally, when you need to share state between different layers of an Ember application, the tool for the job is to create a service. Here for instance, you could imagine having a panel service, maybe something like this:
// app/services/panels.js
```export default Ember.Service.extend({
mainPanelShown: false,
setPanel: function (name, visible) {
set(this, name + 'PanelShown', visible);
}
});```
You can then use it from anywhere:
// If you need to know whether to show the panel/the panel is shown
```export default Ember.Controller.exend({
panels: Ember.inject.service(),
isPanelShown: Ember.computed.readOnly('panels.mainPanelShown')
});```
If you need to trigger it:
```export default Ember.Controller.extend({
panels: Ember.inject.service(),
actions: {
showTheMainPanel: function () {
get(this, 'panels').setPanel('main', true);
}
}
});```
Granted, this is definitely not polished, but you get the idea. The point is to have the service be the central interface for triggering panels and getting their state.
//My version
// Component hbs
```<ul>
<select {{action 'selectTagType' on='change' }} register-as=countryComponent id=tag-type-select disabled={{citySelectDisabled}}>
{{#each cityProp as |elem|}}
<option value="{{elem.id}}" selected={{eq elem.id model.id}}>{{elem.name}} {{elem.currency_id}}</option>
{{/each}}
</select>
</ul>```
// Component JS
```import Ember from 'ember';
export default Ember.Component.extend({
store: Ember.inject.service(),
selects: Ember.inject.service(),
cityProp: Ember.computed({
get() {
// Since we are using Ember.inject.service, we need to call the store using the get helper
return this.get('store').findAll('country');
}
}).readOnly(),
didInsertElement: function() {
this.set('register-as', this);
},
actions: {
selectTagType() {
const selectedEl = this.$('#tag-type-select')[0];
console.log(selectedEl);
const selectedIndex = selectedEl.selectedIndex;
console.log(selectedIndex);
const options = this.$('#tag-type-select option');
console.log(options);
const selectedValue = options(selectedIndex).value;
console.log(selectedValue.innerHTML);
},
enableCitySelect() {
get(this, 'selects').setSelect('city', true);
}
}
});```
// Service
```import Ember from 'ember';
export default Ember.Service.extend({
citySelectDisabled: true,
setSelect: function (name, visible) {
set(this, name + 'SelectDisabled', false);
}
});```
The service is not setting the attribute to true to enable the component to be rendered as disabled