How to pass ember computed model data to nested component without querying?

Question

i have nested components. Every component has button to show its nested component.

From controller I pass selectbox options (query on store) through all components. But query is done before final component with selectbox is even shown/drawn. Real query its done at moment of when second component with this property is drawn.

Is there way to not do query till its really needed for selectbox to be drawn ? I did not wanted to have store property straight in nested component itself.

EDITED

As suggested by kumkanillam, his solution worked pretty well, here is code to get the idea.

In controler:

        reactionTimesForOptions: null,
        allReactionTimes: function() {
            return this.get("store").findAll("reaction-time");
        }.property("store"),
        actions:{
            initialiseRatingOptionsData(){
                if(Ember.isEmpty(this.get("reactionTimesForOptions"))) {
                    this.set("reactionTimesForOptions",  this.get("allReactionTimes"));
            }
        }

In controler hbs

{{#task-list 
    allReactionTimes=reactionTimesForOptions 
    initialiseRatingOptionsData=(action "initialiseRatingOptionsData")}
{{/task-list}}

Then in next 2 nested components

 allReactionTimes=allReactionTimes
 initialiseRatingOptionsData=initialiseRatingOptionsData

And finnaly at point of clicking and showing my component which need to have data from database, in component deciding on showing final component

toggleRatingScreen(){
    this.initialiseRatingOptionsData(); /* at this point query are done since needed only at this point*/
    ....

Answer 1

You can pass empty selectbox options property from controller along with function updateSelectboxOptions which will update selectbox options, and in nested component when you need to data you can just call updateSelectboxOptions.