How do I get rid of mangled metamorph?


I’m iterating through a collection that I defined in my controller like this:

  featured: (->
    @filterProperty 'featured', true

I’m using a foundation orbit plugin to turn this into a carousel.

However my HTML is getting mangled and it’s ruining the plugin because it expects a certain output.

<ul class="orbit-slides-container" data-orbit="" style="margin-left: -800%; width: 1000%; height: 217px;"><script id="metamorph-3-end" type="text/x-placeholder" data-orbit-slide="" style="width: 10%;"></script>
      <script id="metamorph-3-start" type="text/x-placeholder" class="" style="width: 10%;"></script><script id="metamorph-1-start" type="text/x-placeholder" style="width: 10%;" class=""></script>
        <li style="width: 10%;" class="">
          <script id="metamorph-4-start" type="text/x-placeholder"></script>true<script id="metamorph-4-end" type="text/x-placeholder"></script>
          <img src="">
      <script id="metamorph-1-end" type="text/x-placeholder" style="width: 10%;" class=""></script><script id="metamorph-2-start" type="text/x-placeholder" style="width: 10%;" class=""></script>
        <li style="width: 10%;" class="">
          <script id="metamorph-5-start" type="text/x-placeholder"></script>true<script id="metamorph-5-end" type="text/x-placeholder"></script>
          <img src="">
      <script id="metamorph-2-end" type="text/x-placeholder" style="width: 10%;" class=""></script><script id="metamorph-3-end" type="text/x-placeholder" style="width: 10%;" class="active"></script>
    <script id="metamorph-3-start" type="text/x-placeholder" data-orbit-slide="" style="width: 10%;"></script></ul>

coming from this:

<div class='featured'>
  <div class='orbit-container'>
    <div class='preloader'></div>
    <ul class='orbit-slides-container' data-orbit="" >
      {{#each featured}}
          <img src="" />

How do I avoid my HTML from getting mangled? Basically remove all the metamorph stuff.


Unfortunately, you cannot. Metamorph tags are used by ember to bind elements and know what to update.


Maybe you can use an Ember.CollectionView to render a DOM without the script tags that metamorph uses.


@dmathieu how would you get around this if you need to iterate over a collection to use in something like foundation orbit?


@Rengers I’m very new to Ember. Could you explain how I would do that? I am not sure how to get dynamic content in there, let alone the binding to script tag. I don’t have that in my views at all. If you could provide some example could I’d really appreciate it.


I’ve never used the CollectionView before, but I guess something like this should work:

App.OrbitSlidesView = Ember.CollectionView.create({
  tagName: 'ul',
  classNames: ['orbit-slides-container'],
  content: [], //Bind this property to the `featured` property of the controller
  itemViewClass: Ember.View.extend({
    templateName: 'orbit-slider-slide'

<script type='text/x-handlebars' data-template-name='orbit-slider-slide'>
    <img src="" />


This discussion might be of interest/relevance.

If you are willing to modify Zurb Foundation Orbit sass/css you can probably get this to work with the metamorph implementation of ember.

Quoting @stefan

This is likely due to the use of :first-child :last-child :nth-child css pseudo selectors, unfortunately these pseudo selectors also take script tags into account. This can cause some annoying issues, but luckily first-of-type last-of-type nth-of-type selectors can usually be used in-place.

It is likely zurbs css will have to be adapted.

So what does this mean for zurb foundation orbit?

stuff like li:first-child should be changed to li:first-of-type which should let the orbit carousel thingy loop just through the li tags and ignore the script tags.

This is the source you want to investigate.