Hey all, I have a search-component to send input to the router so the router can find the record in the ember-data store and then transition to the record if it finds something. If it doesn’t find a record it should return a message to the component to notify it that nothing is found so I can display a message to the user. The thing is, the action and component are used throughout multiple places in the application.
Now I think that the ember way would be to set a variable from the router on the application controller and then push it down to all the controllers that have the search-component
in it’s template and then push the variable to the component. But this would mean that I need to pass the variable around a lot and include the application
controller all the time through needs.
I’ve implemented it right now with a callback, but this feels like it’s not the Ember way. Is there a better way to do this?
// My component
export default Ember.Component.extend({
participantNotFound: false,
inputValue: "",
notFoundHandler: function(result, context){
var self = context;
if(result.status === 404){
self.set("participantNotFound", true);
Ember.run.later(function(){
self.set("participantNotFound", false);
}, self.get("tooltipDisplayTime"));
} else{
self.set("inputValue", "");
self.$().find("input").blur();
self.set("participantNotFound", false);
}
},
actions: {
findAndGoToParticipant: function(){
var participantID = this.get("inputValue");
this.sendAction("action", participantID, this.notFoundHandler, this);
}
}
});
// My Route
export default Ember.Route.extend({
actions:{
findAndGoToParticipant: function(participantID, callback, context){
var self = this;
this.get('store').find("participant", participantID).then(function(participant){
self.transitionTo("participants.show", participant);
callback(participant, context);
}).catch( function(error){
callback(error, context);
});
}
}
});