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

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

emberjs add code on the fly, after template render

handlebars.js

ember.js

htmlbars