How to get model data from component

1

This is so stupid. How the heck do you access model data from inside component? This is my first attempt on using Ember Data.

So, I have a component that’s being called like this:

{{article/article-full
  article=model.article
  popular=model.popular
  categories=model.categories
}}

Inside the article-full.js component, i need to do some checking to either show or hide one of the field.

showMonth: true,

didReceiveAttrs() {
  let month = this.get('article').month;
  if (month == 'all') {
    this.set('showMonth', false);
  }
}

But this.get('article').month doesn’t actually give me anything meaningful.

2

Hey @rzky, I think you just have a minor syntax error which is causing the issue. Instead of saying

let month = this.get('article').month;

I think you should try:

let month = this.get('article.month');

Since the ember data model is not just a POJO you should use ‘get’ to reference any attribute on it.

If I may, I’d also suggest using a computed property instead of messing with didReceiveAttrs for this specific case. So instead of the above code that you had, just add this to your component:

showMonth: Ember.computed('article.month', function(){
  return this.get('article.month') !== "all";
}),

EDIT: the computed property above is equivalent to the following, which you might also see a lot:

showMonth: function(){
  return this.get('article.month') !== "all";
}.property('article.month'),

But the Dockyard style guide suggests avoiding prototype extensions so that is the recommended syntax

1 Like
3

that’s awesome. i learned something new everyday. thx @dknutsen!

1 Like
4

Just a small suggestion from me too.

If you’re model is small enough, is it easier/tidier to pass in the whole model?

{{article/article-full model=model}}

And then in the component.js distribute the properties.

1 Like