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.

The proper way to go about this is with `{{component store=store}}` as you mentioned. Components shouldn't have access to the store directly. What did you try when you followed that approach? — Oren Hizkiya, Feb 10 '15 at 16:14
@Oren I was using `var data = this.get('store').find('restaurant',1');` where restaurant is my model. But if I then do something like `data.get('name')` it returns undefined. How should I handle that? — Rchristiani, Feb 10 '15 at 16:32
First can you use ember inspector to confirm that your controller has access to the store as expected and that the store contains the data you expect? — Oren Hizkiya, Feb 10 '15 at 16:38
@Oren I am not 100% sure how I can check that, I can see the data in the data tab. The controller I have is an `ApplicationController` if I select View Tree and in the Model section for that controller there is a `` and on the right side bar there is a `Ember.ArrayProxy` that has my items in there. That seems like it is not quite right...Does that help. Thanks so much. — Rchristiani, Feb 10 '15 at 17:24
I'd need to see the code in your routes and controllers in order to better advise, but at least you are pulling data :) — Oren Hizkiya, Feb 10 '15 at 17:35
@Oren haha, thanks. I added the route, controller and template to the questions if that helps. — Rchristiani, Feb 10 '15 at 17:47

Oren Hizkiya · Accepted Answer · 2015-02-10T18:05:50.037

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

Thank you so much. This works. My solution was to then to `var store = this.get('data');` and then I could iterate over that. Thanks again! — Rchristiani, Feb 10 '15 at 19:04

Ember: Accessing a data store in an Ember component

1 Answers1