emberjs在模板渲染后即时添加代码

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 - eg 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 - eg colors . This array will be initially containing only one object, automatically added when user enters the route. This setup (eg 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.