在一个模板中多次插入同一个 Ember View答案

【问题标题】：Insert same Ember View multiple times in one template在一个模板中多次插入同一个 Ember View
【发布时间】：2014-08-30 05:29:32
【问题描述】：

我设计了一个用于显示图片的 Ember 视图，该视图使用 SVG 生成一个六边形。现在我想在同一页面上显示多张图片。

我将我的视图集成到这样的模板中：

{{view App.HexagonView width="68" height="60" image="http://placekitten.com/g/121/121"}}

现在，当我集成一次时，效果很好。当我将它集成两次时，它只显示一个。错误接缝来自于 Ember 生成两个具有相同 ID 的 HTML 元素，因此插入视图内容只进入一个 HTML 容器。 Ember 的方法是什么？

【问题讨论】：

HexagonView 有 elementId 属性吗？？？
那么我认为 ember 不会设置相同的 elementId...顺便说一句，尝试使用组件，因为您需要在同一个模板中使用多个视图实例...看看这个示例jsbin.com/ORutIve/111/edit

标签： ember.js

【解决方案1】：

当您将 ember/handlebars 用于独立、可重用的 Web 组件时，请使用 Em.Component 而不是视图。

或者，如果您不需要视图的额外范围（例如，您不处理操作、更改单个图像元素的属性等），您可以使用 Ember 帮助器绑定并返回纯 html：

Em.Handlebars.helper('hexagon', function(image, height, width) {
  var img = '<img src="' + image + '" height="' + height + '" width="' + width + '" alt="A hexagon image">';

  return new Handlebars.SafeString(img);
});

然后，在您的模板中：

{{hexagon width='68' height='60' image='//placekitten.com/g/121/121'}}

如果你想变得聪明，你可以自动detect the size of the image using javascript。

【讨论】：