Skip to content

Instantly share code, notes, and snippets.

@scottmessinger
Last active September 22, 2016 17:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save scottmessinger/5e495e8b7e6cb9ec8d56400f7b2d72ff to your computer and use it in GitHub Desktop.
Save scottmessinger/5e495e8b7e6cb9ec8d56400f7b2d72ff to your computer and use it in GitHub Desktop.
New Twiddle
import Ember from 'ember';
export default Ember.Component.extend({
didRender(){
console.log('didRender expensive-outline-item.hbs')
}
});
import Ember from 'ember';
export default Ember.Component.extend({
didRender(){
console.log('didRender expensive-outline.hbs')
}
});
import Ember from 'ember';
const {get, set} = Ember;
export default Ember.Component.extend({
init(){
this._super(...arguments)
set(this, "counter", 0)
},
items: Ember.computed('val', function(){
let arr = []
for(let i=0; i<500; i++){
arr.push({title: `Item Number ${i}`})
}
return arr
}),
didRender(){
console.log('didRender the-parent.hbs')
},
actions: {
increment(){
set(this, 'counter', get(this, 'counter') + 1)
},
anAction(){}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
});
{{the-parent counter=counter}}
{{outlet}}
<br>
<br>
<ul>
{{#each items as |item index|}}
<li>{{expensive-outline-item item=item anAction=anAction}}</li>
{{/each}}
</ul>
{{yield}}
<p>
<b>The problem</b><br>
If a component passes a closure action to the children and we change a property of the component, it forces all the children to rerender <i>even if we didn't pass them the property we changed</i>.
</p>
<p>
<b>The test case:</b><br>
Here's the hierarchy: the-parent > expensive-outline > [expensive-outline-item]
</p>
<p>
When we increment the counter property on the parent component, all the expensive-outline-items will rerender even though we're not passing `counter` to expensive-outline or to `expensive-outline-item`.
</p>
<p>Open the console to see `didRender` being logged</p>
<button {{action "increment"}}>Increment Counter property on the-parent component: {{counter}}</button>
{{expensive-outline items=items anAction=(action "anAction")}}
{{yield}}
{
"version": "0.10.5",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "beta",
"ember-data": "2.8.0",
"ember-template-compiler": "beta",
"ember-testing": "beta"
},
"addons": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment