How to append component after user action


#1

My app currently has a component called color-box. I have another component called add-color-box that contains a button sending the action, appropriately named “addColorBox”. I want to know how I can add a new color-box component to my view each time the user clicks the add-color-box button. In other words, how can I append more components to the page.

It is important to me that I understand if this can be done without my component being backed by a model. At some point, these color-boxes will refer to models, but I’d like to know if components can be added to the page in this manner first.

Here is an example: https://ember-twiddle.com/5f705e237e9e2738aea9


#2

my approach is to set a flag variable to false in component and use if to show it. So to show it I just set it to true. Am not sure its the best approach but it works for me


#3

You don’t really need to have the add-color-box button in a different component but if you require it, you just need to bubble the action (with closure actions) to the controller and there update the list of colors. Then, in the application template, render every color with the each handlebar and your component.

Check this modified twiddle.


#4

Thank you Henry! This makes sense and is how I thought I would handle it once I add models. In my mind, I was imagining appending another {{color-box}} to the page and was wondering if that action existed, especially if I wanted to add it to a different part of the DOM.


#5

@mtangoo I saw this answer in a different post on here to the same question. My issue is that I need to potentially add an infinite number of boxes and cannot reasonably have an infinite number of boxes waiting to be revealed.