Insert same Ember View multiple times in one template

Question

I have designed an Ember View for displaying pictures, where the view produces a hexagon using SVG. Now I want to display multiple pictures on the same page.

I integrate my view in a template like this:

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

Now when I integrate it once, it works great. When I integrate it twice, it only displays one. The error seams to come from the fact that Ember produces two HTML elements with the same ID, and so inserting the view content goes only to one HTML container. What's the Ember way to do this?

then i don't think ember will set same elementId...BTW try using components since you need multiple view instances in same template...have a look at this example http://jsbin.com/ORutIve/111/edit — thecodejack, Jul 09 '14 at 13:19

score 2 · Accepted Answer · edited May 23 '17 at 12:11

Use a Em.Component instead of a view when you are using ember/handlebars for a self-contained, reusable web component.

Alternatively, if you do not need the additional scope of the view (e.g. you are not handling actions, changing a property on an individual image element, etc) you can use an Ember helper to bind and return the pure 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);
});

Then, in your template:

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

If you wanted to be clever you could automatically detect the size of the image using javascript.

Insert same Ember View multiple times in one template

1 Answers1