emberjs在模板渲染后动态添加代码

Question

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

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

然后

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

Answer 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。多亏了这一点，在其他一些操作（如提交）中，您可以访问用户提供的所有值并根据需要进行处理。