Ember Js Remove Metamorph code

Question

I am currently in a situation where i need to remove the metamorph tags used in a ember js select box. I use a JS plugin that takes my select box and turns it into a styled select box which i have customized using css.

I currently have this ember js select box in my view.

<script type="text/x-handlebars" data-template-name="opportunities">
{{view Ember.Select 
             contentBinding="controller.filter" 
             optionLabelPath="content.metacode"  
             optionValuePath="content.description" 
             class="mydds opportunitylistcategory"}}
</script>

I just need a way to remove the metamorph code but for ember selectbox to still have binding etc enabled... I have read about removing metamorphic data with a jquery sortable but that hasnt helped me. Thanks in advance!

Answer 1

The best way to work around this is to use an Ember.CollectionView.

I've run into this issue with a simple unordered list (<ul><li>).

Here is an answer that demonstrates how to do it https://stackoverflow.com/a/11749736/701368

---

Edit

The original answer was for a version of Ember before 1.0.

I would recommend using the {{each}} helper with the itemViewClass attribute when dealing with newer versions of Ember.js. You can find the documentation here: http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#toc_specifying-a-view-class-for-items.

So don't use the block level helper; you want to use {{each}} instead of {{#each}}.