Search component and return value from the router


#1

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);
            });
        }
    }
});