How to dynamically add/remove sibling components in an Ember v2 compatible way

Design
1

The problem I’m trying to solve is this:

Given the mockup below, suppose each row is an li and reuses an item-element component.

What’s the best way to architect this so that a component can append additional peer components of the same kind as well as allowing itself being removed from a template (or another component) that contains them? I’m using Ember-CLI (v0.2.2), Ember v1.11.1 and would like to stay with forward-compatible strategies (no ItemController, ArrayController, as few Views as possible… etc).

Thanks.

2

Something like this: http://jsbin.com/cebokuxoqe/1/edit?html,js,output

It follows the whole actions up, data down. I’m letting the owner of the items mutate the array versus the component. The index controller would eventually become your route-able component.

2 Likes
3

That looks awesome. Thank you, @jasonmit. That’s exactly what I needed to know.

So basically:

  • Model-backed components
  • Events bubbled up to controller for centralized handling
  • Let Ember handle the rest (DOM manipulation… etc)

Makes a lot of sense.