CODEWITHSUNDEEP
javascriptember.js
Michael Andorfer
Michael Andorfer

Reputation: 1800

How to access property in components javascript file?

I am currently developing an ember application.

At the moment I am trying to access a property which was set in a route inside of a components js file.

The overall is to fetch data from the Facebook Graph API inside the route (as some kind of model) and than accessing those data inside the component to draw points on a map.

My template looks like this:

// map.hbs
{{map-widget posts=posts}}

My route looks like this:

// routes/world.js
import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
  fetchAllGeotaggedPosts() {
    return new Promise((resolve, reject) => {
      let postsArr = [];
      function recursiveAPICall(apiURL) {
        FB.api(apiURL, response => {
          if (response && response.data) {
            // Add response to posts array (merge arrays), check if there is more data
            postsArr = postsArr.concat(response.data);
            if (response.paging && response.paging.previous) {
              recursiveAPICall(response.paging.previous);
            } else {
              // console.log(postArr)
              resolve(postsArr);
            }
          } else {
            reject();
          }
        })
      }
      recursiveAPICall('/me/feed?fields=id,name,message,picture,place,with_tags&with=location');
    })
  },

  beforeModel(transition) {
    this._super(transition);
    return this.fetchAllGeotaggedPosts().then(response => {
      this.set('posts', response);
      // console.log(this.get('posts'))
    })
  },

  model: function() {
    //console.log(this.get('posts'))
    return this.get('posts'));
  }
})

My component (where I would like to access the property) looks like this:

// components/world.js
didRender() {
  console.log(this.get('posts'))
}

My problem is that the post is always undefined inside the component which means it does not receive or cannot access the value.

I am able to access the post value in the beforeModel and model hook so I am sure that the promise resolves with posts from Facebook and is not rejected.

I also tried to set a string value which lead to an undefined too.

Does anyone have a solution or recognize an error in my code?

Thanks in advance.

Upvotes: 0

Views: 327

Answers (1)

Jovica Šuša
Jovica Šuša

Reputation: 622

You are passing posts to component but posts are not defined, what you want is this. {{map-widget posts=model}} You can access model function that return posts, but you can't access posts because they aren't defined nowhere.

Upvotes: 3

Related Questions