Ember: Accessing a data store in an Ember component

Question

I have component that I want to provide data too. I am using Ember-CLI if that helps.

The component is a map that I am loading onto the page that I than want to place markers on. I used a component so I could use the didInsertElement method to get access to the element once it is ready.

export default Ember.Component.extend({
    componentMap: '',
    didInsertElement: function() {
        navigator.geolocation.getCurrentPosition(position => {
            //Initialize map...
            this.populateMap();
        });
    },
    populateMap: function() {
        //Get store
        var store = this.get('parentView.targetObject.store');
        console.log(store);
        //Search Store
        var data = store.find('restaurant');
        //Where is the data?!
        data.map(item => {
            console.log(item.get('name'));
        });
    }
});

I am having an issues getting the data from a store. I have seen a couple methods, here shows two different methods. First being the this.get('parentView.targetObject.store') or this.get('targetObject.store'). I have also tried the {{component store=store}} method, but that was not working for me either. This might have to do with a fundamental lack of understanding of data flow in an ember app.

I am using Ember CLI and I am wondering if it has anything to do with the context of this inside modules?

If I am way off base as to how I should do this, please let em know!

UPDATE: Adding route, controller and template for context.

Route

export default Ember.Route.extend({
    model: function() {
        return this.store.find('restaurant');
    }
});

Controller

export default Ember.Controller.extend({
    actions: {
        add: function() {
            var $addForm = $('.add-form');
            $addForm.show();
        }
    }
});

Template (index.hbs, which is output in application.hbs {{outlet}})

{{main-map store=store}}

Thanks.

Answer 1

What is happening is as follows:

The model associated with your control is populated as an array of restaurants, not a single map or anything of that sort.

return this.store.find('restaurant'); returns an array of restaurants from the store which ultimately populates the model of your controller.

If you want access to the data contained within your model in your component, you should pass the model as an argument into your component.

So, you can pass the array of restaurants as follows (rename the property as appropriate):

{{main-map data=model}}

Or, if in theory you wanted to display a component for each restaurant:

{{#each restaurant in model}}
  {{your-component name=restuarant.name}}
{{/each}}