Ember.js component to replace #each template helper that only iterates over records that are saved.

app%components%each-saved.js

import Ember from 'ember';

const EachRecordComponent = Ember.Component.extend({

  tagName: '',

  savedRecords: Ember.computed.filterBy('records', 'isNew', false)

});

EachRecordComponent.reopenClass({
  positionalParams: ['records']
});

export default EachRecordComponent;

app%templates%components%each-saved.hbs

{{#each savedRecords as |record|}}
  {{yield record}}
{{else}}
  {{yield to="inverse"}}
{{/each}}

usage.hbs

<div class="CARD">
  <table class="LIST">
    {{#each-saved model.users as |user|}}
      <tr>
        <td class="LIST-cell">{{user.name}}</td>
        <td class="LIST-cell--right"><a href="" class="BUTTON">Remove</a></td>
      </tr>
    {{else}}
      Empty state
    {{/each-saved}}
  </table>
</div>