Question

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

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

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

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

Answer 1

当您使用ember / handlebars作为自包含，可重复使用的Web组件时，请使用Em.Component而不是视图。

或者，如果您不需要视图的其他范围（例如，您不处理操作，更改单个图像元素上的属性等），则可以使用Ember帮助程序绑定并返回纯html：< / p>

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。

在一个模板中多次插入相同的Ember View

1 个答案: