Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Question about setting headData from a component #56

Open
samselikoff opened this issue Dec 4, 2018 · 0 comments
Open

Question about setting headData from a component #56

samselikoff opened this issue Dec 4, 2018 · 0 comments

Comments

@samselikoff
Copy link

I'm upgrading ember-cli-head from 3.x to 4.x and running into a bug caused by the new {{head-layout}} component.

In our app we have a component called <PageInfo> that we use as a declarative interface to setting properties on headData.

We use it like this:

{{page-info title='About EmberMap' description='Meet Sam and Ryan'}}

and it works by setting data on the headData service in didReceiveAttrs:

// components/page-info.js
export default Component.extend({
  headData: service(),
  
  didReceiveAttrs() {
    this._super(...arguments);

    let props = {
      title: this.get('title'),
      description: this.get('description'),
      ...
    };
    
    this.get('headData').setProperties(props);
  }
});

This works in 3.x but in 4.x, we get a double render error:

Assertion Failed: You modified "model.description" twice on <ember-map@service:head-data::ember700> in a single render. It was rendered in "component:head-content" and modified in "component:page-info". This was unreliable and slow in Ember 1.x and is no longer supported. See emberjs/ember.js#13948 for more details.

I think I understand why this error is thrown – {{head-content}} has already rendered <head>'s content, and then {{page-info}} renders, which updates the already-rendered content.

I know typically the fix for this is to set the data before the render, but in this case we actually want this component interface, which means the data wouldn't be known until render-time.

Questions:

  1. Why wasn't this a problem in 3.x? Or, was it happening and we just didn't know about it?
  2. Is there a "better" way to have our component set data on headData?
  3. One "fix" for this is to put the call to setProperties inside of a scheduleOnce('afterRender'), but I'm wondering if there's a better way to solve this problem.
  4. Any other recommendations?

Thanks for any help!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@samselikoff