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

【问题标题】：emberjs add code on the fly, after template renderemberjs 在模板渲染后即时添加代码
【发布时间】：2015-07-30 20:04:47
【问题描述】：

在 emberjs 中，您可以将代码添加到您的模板文件中：

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

模板然后呈现。但问题是，如何在模板渲染后动态添加它？比如我想添加一个按钮，生成新的输入字段（颜色），用户可以根据需要继续添加新的颜色吗？怎么做呢？

【问题讨论】：

【解决方案1】：

首先，如果您想让用户添加另一个颜色输入，我相信您毕竟希望以某种方式访问用户输入的值 - 例如在某些动作中。因此，您必须进行一些绑定来存储这些值。

假设您需要将它们存储在某种数组中 - 例如colors。该数组最初将仅包含一个对象，当用户输入路线时会自动添加。此设置（例如，在setupController 路由中的钩子中）可能如下所示：

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

让我们通过控制器中的操作来处理按钮的点击：

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

然后，您的模板可以如下所示：

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

使用pushObject 方法使推送绑定兼容。每次将任何内容推送到colors 数组时，模板都会自动重新渲染并注入另一个input 字段，并将value 正确绑定到color.value。多亏了这一点，在其他一些操作（如提交）中，您可以访问用户提供的所有值并根据需要处理它们。

【讨论】：