Question about setting headData from a component #56
Description
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:
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:
- Why wasn't this a problem in 3.x? Or, was it happening and we just didn't know about it?
- Is there a "better" way to have our component set data on
headData? - One "fix" for this is to put the call to
setPropertiesinside of ascheduleOnce('afterRender'), but I'm wondering if there's a better way to solve this problem. - Any other recommendations?
Thanks for any help!