从服务器文本动态构建Ember组件

Question

这种情况是假设的（有点），但请耐心等待：

想象一下，我有一台服务器来管理来自客户和客户的所有通信。客户可以通过标准方式（outlook，gmail等）向我发送电子邮件，我将收到它。我的服务器将解析它并将其存储为html字符串。

 <div>Hello world</div>
 <div>Second Line</div>
 <img width="10px" height="10px" src="https://mysquare.com/square.png">
 <img width="10px" height="20px" src="https://myrectangle.com/rectangle.png">
 <div>That picture is great</div>

然后，当我查询对话时，我收到一条消息列表，而这些消息又分别在上面定义了内部html。但遗憾的是，他们中没有一个人拥有巨大的余烬:(

现在假设我希望将该图像包装到自己的组件中，让我们说它的源和尺寸是动态的。

{{dynamic-img width=imageWidth height=imageHeight src=imgSrc}}

理想情况下，我会将图像分离并提取相关的键值对，然后将这些把手模板化为dom并且（假设我已经定义了dynamic-img组件）它会起作用。但事实并非如此。

如何将此html文本自动转换为ember组件？让我们说我无法访问服务器。

  

ember，ember-data，ember-cli =＆gt; 2.9.x

Answer 1

如果我理解你的问题，你可以在你的模板中有一个循环

{{#each images as |image|}}
    {{dynamic-img width=image.width height=image.height src=img.src}}
{{/each}}

然后在解析html后，在控制器中创建“images”数组，其中包含带有解析数据的项目列表。