components.test-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNameBindings: ['clicked'],
  tagName: 'button',
  click() {
    this.set('clicked', true);
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    addItem() {
      this.get('items').pushObject({
        name: 'new'
      });
    },
    changeItemProperty() {
      this.set('items.firstObject.name', 'changed');
    },
    deleteItem() {
      this.get('items').removeAt(0);
    }
  },
  items: Ember.A([
    { name: 'foo' },
    { name: 'bar' }
  ]),
  arrayProxy: Ember.computed('items.[]', function() {
    return Ember.ArrayProxy.create({
      content: this.get('items'),
      objectAtContent: function(idx) {
				let obj = Ember.copy(this.get('content').objectAt(idx));
        Ember.set(obj, 'name', 'test');
        return obj;
    	}
    });
  }),
  filterItems: Ember.computed.filter('items', function(item) {
    return true;
  }),
  mapItems: Ember.computed.map('items', function(item) {
  	return Ember.ObjectProxy.create({
      content: item
    });
	}),
  mapByItems: Ember.computed.mapBy('items', 'name'),
  mapByFakeItems: Ember.computed.map('items', item => item.name),
  sortItems: Ember.computed.sort('items', function(a, b) {
    if (a.name > b.name) {
      return 1;
    } else if (a.name < b.name) {
      return -1;
    }
    return 0;
  })
});

styles.app.css

.clicked {
  background-color: yellow;
}

templates.application.hbs

<h1>avoid rerender of whole list</h1>

<button {{action 'addItem'}}>Add another item</button>
<button {{action 'deleteItem'}}>Delete first item</button>
<button {{action 'changeItemProperty'}}>Change value of first item</button>

<h2>ArrayProxy</h2>
<ul>
  {{#each arrayProxy as |item|}}
    <li>
    	{{test-component name=item.name}}
    </li>
  {{/each}}
</ul>
<h2>computed.map</h2>
<ul>
  {{#each mapItems as |item|}}
    <li>
    	{{test-component name=item.name}}
    </li>
  {{/each}}
</ul>
<h2>computed.mapBy</h2>
<ul>
  {{#each mapByItems as |name|}}
    <li>
    	{{test-component name=name}}
    </li>
  {{/each}}
</ul>
<h2>computed.map with mapBy Syntax</h2>
<ul>
  {{#each mapByFakeItems as |name|}}
    <li>
    	{{test-component name=name}}
    </li>
  {{/each}}
</ul>
<h2>direct</h2>
<ul>
  {{#each items as |item|}}
    <li>
    	{{test-component name=item.name}}
    </li>
  {{/each}}
</ul>
<h1>computed.sort</h1>
<ul>
  {{#each sortItems as |item|}}
    <li>
    	{{test-component name=item.name}}
    </li>
  {{/each}}
</ul>
<h2>computed.filter</h2>
<ul>
  {{#each filterItems as |item|}}
    <li>
    	{{test-component name=item.name}}
    </li>
  {{/each}}
</ul>

<p>Issue: If computed.map returns an object glimmer rerenders entire list.</p>

templates.components.test-component.hbs

{{name}}

twiddle.json

{
  "version": "0.8.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.5.1",
    "ember-data": "2.5.2",
    "ember-template-compiler": "2.5.1"
  }
}