ember.js - emberjs 在模板渲染后即时添加代码

Question

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

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

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

score 2 · Accepted Answer

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

假设您需要将它们存储在某种数组中 - 例如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。多亏了这一点，在其他一些操作（如提交）中，您可以访问用户提供的所有值并根据需要处理它们。

1 回答 1