Updating computed property re-renders full list

Design
1

Hello all,

I’m new to Ember and really enjoying learning a new framework.

I’ve run into an issue using {{#each}} to render a computed property. The entire list is re-rendered any time the computed property has an item added or removed.

Here is a simple todo list example: JS Bin - Collaborative JavaScript Debugging

Adding new todos you can see ‘didInsertElement’ called for every component in the list. If I loop over the controller ‘model’ instead, only the newly added element is rendered.

I’m not sure if this is a bug or intended feature but it’s causing issues with components that do a lot of initialization when they are inserted. Is there a way to avoid re-drawing every element when the computed property changes?

Here is one solution that uses an observer to update an array instead of using computed properties:

Is this an appropriate pattern? Seems like I’m re-writing the computed property…

Thanks!

2

Hey —

This is a problem that I believe will go away when the new DOM-Diffing / Glimmer engine lands. But for now, Ember’s built in solution are computed arrays that handle array changes “one at a time” so that the whole array is not thrown away (and its corresponding DOM) every time one item needs to be added/removed/etc.

Documentation here.

In your example, activeTodos would become:

activeTodos: Ember.computed.filterBy('model', 'active', true)
3

That works perfectly. Thanks!