ember-computed-reverse

A computed property macro for ember.js that returns a reversed array without allocating a new array on each replace action

Usage no npm install needed!

<script type="module">
  import emberComputedReverse from 'https://cdn.skypack.dev/ember-computed-reverse';
</script>

README

Ember.computed.reverse Build Status

A computed property macro for ember.js that returns a reversed array without allocating a new array on each replace action.

Usage

App.Timeline = Ember.Object.extend({
  reverseChronPosts: Ember.computed.reverse('posts')
});

var timeline = App.Timeline.create({posts: [
  'good morning',
  'grabbing lunch',
  'making dinner'
]});
timeline.get('reverseChronPosts'); // ['making dinner', 'grabbing lunch', 'good morning']

Why?

Simply using a computed property with toArray().reverse() will recreate a new array every time an item is added/removed from the array. With a large array of items, or complex DOM representation of these items, re-rendering becomes expensive. This leverages reduce computed arrays to perform replace actions one at a time.

Example

You can see the benefits in this example