Rendering an image from model string in specific events only

Hey guys,

I was trying to get an image to load in a certain setup. I have a dynamic events page where the model fetches data from firebase. In each case, the route does not change the page since it is a nested template. However, in certain “OFF” day events I want an image to appear for all the “OFF” named events only. I want it to replace the Event data when clicked and have just the image appear. Here are some of my files:

/* single.event hbs */

{{event.name}}

Address: {{event.address}}

Contact: {{event.phone}}

Website: {{event.website}}

{{#if isImageShowing}}

Hide {{else}} Show {{/if}}

{{outlet}}

import Ember from ‘ember’;

export default Ember.Component.extend({ isImageShowing: false, actions: { imageShow() { this.set(‘isImageShowing’, true); }, imageHide() { this.set(‘isImageShowing’, false); } } });

import Ember from ‘ember’;

export default Ember.Route.extend({ model: function(params) { return this.store.findRecord(‘event’, params.event_id);

},

setupController: function(controller, model){
	controller.set('event', model);
}

});