Skip to content

Instantly share code, notes, and snippets.

@OmShiv
Created June 11, 2018 17:17
Show Gist options
  • Save OmShiv/5f7ed551d1887b9e17b16293ca74a1a8 to your computer and use it in GitHub Desktop.
Save OmShiv/5f7ed551d1887b9e17b16293ca74a1a8 to your computer and use it in GitHub Desktop.
Ember Components and Mixins data leak fix
import ComponentOne from './component-one';
import ComponentA from '../mixins/component-a';
export default ComponentOne.extend(ComponentA, {
type: 'Component Five',
description: 'Extends Component One and includes Component A. Overrides obj in definition.',
obj: {
val: 5
}
});
import ComponentOne from './component-one';
import ComponentA from '../mixins/component-a';
export default ComponentOne.extend(ComponentA, {
type: 'Component Four',
description: 'Extends Component One and includes Component A. Doesn\'t override obj in definition.',
});
import Ember from 'ember';
import layout from '../templates/components/component-one';
export default Ember.Component.extend({
layout,
type: 'Component One',
description: 'The base component',
obj: {
val: 1
}
});
import ComponentOne from './component-one';
import ComponentA from '../mixins/component-a';
export default ComponentOne.extend(ComponentA, {
type: 'Component Six',
description: 'Extends Component One. Includes Component A. Handles setting obj correctly in init.',
init() {
this._super(...arguments);
this.obj = {
val: 6
};
}
});
import ComponentOne from './component-one';
import ComponentA from '../mixins/component-a';
export default ComponentOne.extend(ComponentA);
import ComponentOne from './component-one';
export default ComponentOne.extend({
type: 'Component Two',
description: 'Extends component one',
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
import Mixin from '@ember/object/mixin';
export default Mixin.create({
type: 'Component A',
description: 'The mixin description',
obj: {
val: 'A'
}
});
{{component-one}}
{{component-two}}
{{component-three}}
{{component-four}}
{{component-five}}
{{component-six}}
<div>
<h2>{{type}}</h2>
<p>{{description}}</p>
<p>Value: {{obj.val}}</p>
<p>{{input value=obj.val}}</p>
</div>
{
"version": "0.14.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "2.18.2",
"ember-template-compiler": "2.18.2",
"ember-testing": "2.18.2"
},
"addons": {
"ember-data": "2.18.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment