Toggle component enabled/disabled using service

@c9dw5er wrote:

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
propertyObserver : Ember.observer('property', function(){
...
})

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

Posts: 1

Participants: 1

Read full topic