ember-1.13-over-rendering

components.checkbox-input.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'input',
  type: 'checkbox',
  
  attributeBindings: [ 'type', 'name', 'checked:checked' ],
  
  change: function() {
    this.sendAction('onChange', this.get('name'), this.$().is(':checked'));
  },
});

controllers.application.js

import Ember from 'ember';

const animals = 'https://raw.githubusercontent.com/boennemann/animals/master/words.json'

const PromiseArray = Ember.ArrayProxy.extend(Ember.PromiseProxyMixin);

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  term: '',
  selection: function() {
    return [];
  }.property(),
  
  items: function() {
    return PromiseArray.create({
      promise: fetch(animals).then(res => res.json())
    });
  }.property(),
  
  selectableItems: function() {
    const selection = this.get('selection');
    return this.get('items').map(item => ({
      item,
      isSelected: selection.includes(item),
    }));
  }.property('selection.[]', 'items.[]'),
      
  filteredItems: function() {
    const term = this.get('term');
    const items = this.get('selectableItems');
    
    if (!term) { return items; }
    
    return items.filter(item => item.item.indexOf(term) !== -1);
  }.property('selectableItems', 'term'),
    
  actions: {
    updateSelection(item, isSelected) {
      const selection = this.get('selection');
      isSelected 
        ? selection.addObject(item) 
        : selection.removeObject(item);
    },
    clearSelection() {
      this.get('selection').clear();
    },
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

p {
  background:papayawhip;
  padding:15px;
  height:30px;
}

ol {
  list-style:none;
  padding:0;
}

li {
  border-left:2px solid rebeccapurple;
  transition:0.5s border-left-width ease-in-out;
}

li:hover {
  border-left-width:10px;
}

templates.application.hbs

{{input value=term}}

Showing {{filteredItems.length}} of {{items.length}}

<button {{action "clearSelection"}}>Clear Selection</button>
<p>
  <small>{{#each selection as |item|}} {{item}} {{/each}}</small>
</p>

<ol>
  {{#each filteredItems as |item|}}
    <li><label>
      {{checkbox-input
        name=item.item 
        checked=item.isSelected 
        onChange="updateSelection"}}
      {{item.item}}
    </label></li>
  {{/each}}
</ol>

twiddle.json

{
  "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": "2.8.0",
    "ember-data": "2.8.0",
    "ember-template-compiler": "2.8.0",
    "ember-testing": "2.8.0"
  },
  "addons": {}
}