Access EmberJS Data from a Component

February 11th, 2015

emberjs

 

I am building a small EmberJS application using the Ember-CLI. In the application I have a map that I wanted to load some data to. I ended up picking an Ember Component to control the map so that I could use the didInsertElement method to make sure that my maps markup was ready to be initialized.


//Component called main-map
export default Ember.Component.extend({
	componentMap: '',
	didInsertElement: function() {
		navigator.geolocation.getCurrentPosition(position => {
			//Initialize the map
			this.populateMap();
		});
	},
        populateMap() {
            ...
        }
});

After I had my map on the page I wanted to access the data store from my parent controller. After googling around for a while I did not come up with exactly what I wanted. By default the data from an Ember Controller or Route is not injected into a Component. After asking on Stackoverflow, the answer was pretty simple!

I use my main-map component in a template like such:


//index.hbs template
{{main-map}}

From there you can actually add attributes to a component, and it is here that we add our data! The process is pretty simple, lets look at the new component in the template.


{{main-map data=model}}

It is that simple, you might be asking your self, where does this model come from though? This was defined inside my ApplicationRoute.


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

In this route I return my store as the model for the route, that way I can use it through out!

With this I was able to simply get my data and iterate over them however I wished! So the populateMap method in my component now looks like this.


populateMap: function() {
	//Get store
	var store = this.get('data');
	//Search Store
	store.map(item => {
		console.log(item.get('name'));
	});
}

Done and done.

  • pmkhoa

    I find this is very helpful. Thank you! I was wondering whether to can using property to rerender populateMap whenever the model change?

  • Dilip

    Although the above implementation works, but you are interpreting it wrong. In your populateMap function you are not actually getting the instance of store and you can’t call methods like find etc. It’s just the data passed to component which is a trivial way.

    • Ryan Christiani

      Hi Dilip,

      I am not sure 100% understand what you are saying. Maybe my wording is wrong, in my populateMap function I am not looking to get a store instance, I just want the data to put on the map. Maybe I shouldn’t call it store since that has other meanings. Instead of just saying it is wrong, do you have an example of what you think is should look like?

      Thanks.

  • Rilwanrabo

    Hi @ryanchristiani:disqus can u pls come up with tutorial about jquery datatables and ember 2.0 with ember-data of course