How do I get rid of mangled metamorph?

1

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

  featured: (->
    @filterProperty 'featured', true
  ).property('@each.featured')

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="http://placehold.it/268x368">
        </li>
      <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="http://placehold.it/268x368">
        </li>
      <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}}
        <li>
          {{featured}}
          <img src="http://placehold.it/268x368" />
        </li>
      {{/each}}
    </ul>
  </div>
</div>

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

2

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

3

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

4

@dmathieu how would you get around this if you need to iterate over a collection to use in something like foundation orbit? http://foundation.zurb.com/docs/components/orbit.html

5

@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.

6

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'>
  <li>
    {{view.content}}
    <img src="http://placehold.it/268x368" />
  </li>
</script>
7

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.

http://www.w3schools.com/cssref/sel_first-of-type.asp

This is the source you want to investigate.

https://github.com/zurb/foundation/blob/master/scss/foundation/components/_orbit.scss