emberjs add code on the fly, after template render

Question

In emberjs, you can add code to your template file:

{{input type="text" value=color}}

the template then renders. But the question is, how can you add this dynamically after the template renders? For example, I want to add a button, to generate new input fields (colors), and the user can continue to add new colors as needed? How would one go about doing this?

Answer 1

First of all, if you want to let user add another input for color, I am sure that you want to somehow access the value user inputs after all - e.g. in some action. Therefore, you will have to make some bindings that will store that values.

Let's say you need to store them in some kind of an array - e.g. colors. This array will be initially containing only one object, automatically added when user enters the route. This setup (e.g. in setupController hook in route) may look like this:

setupController: function(controller, model) {
  controller.set("colors", []);
  controller.get("colors").pushObject({ value: "" });
}

And let's handle the click on the button by an action in controller:

actions: {
  handleClick: function() {
    this.get("colors").pushObject({ value: "" });
  }
}

Then, your template can look like this:

{{#each color in colors}}
  {{input type="text" value=color.value}}
{{/each}}

Using pushObject method make pushing binding-compliant. Every time you push anything to colors array, the template will automatically rerender and inject another input field with properly binded value to color.value. Thanks to that, in some other action (like submit) you can access all the values provided by the user and process them as you want.