Question

I have a template that iterates over a controller array – and for some reason i can’t use the jquery-ui accordion function – I think that this is due to the added markup ember adds to the html e.g. <script type="text/x-placeholder" id="metamorph-1-start"></script>

Any thoughts how can i fix this?

here is the code:

<div id="chat-tab-container">

                <script type="text/x-handlebars">
                    {{#each App.chatTabsController}} 

                        <h3 class="row1">
                            <div class="avatar " style="background: red;">*</div>
                            <div class="contact-name ">{{contactName}}</div>
                        </h3>
                        <div class="row2">
                            <div class="contact-name ">content</div>
                        </div>

                        <h3 class="row1">
                            <div class="avatar " style="background: red;">*</div>
                            <div class="contact-name ">boni</div>
                        </h3>
                        <div class="row2">
                            <div class="contact-name ">content</div>
                        </div>

                    {{/each}}
                </script>

            </div>

and the jquery call: $('#chat-tab-container').accordion()

Answer 1

As Cory mentioned the problem is that the content for the accordion is not rendered/inserted in the DOM when you call the accordion method. One workaround is that you use a ember view as a wrapper and call the accordion method inside the didInsertElement method. I have provided a fiddle with a working example.

Basically your template changes to:

<script type="text/x-handlebars">
  {{#view App.TabView}}                     
    {{#each App.chatTabsController.content}} 
      <h3>{{contactName}}</h3>
      <div>content for {{contactName}}</div>
    {{/each}}
  {{/view}}
</script>

​
Code for view:

App.TabView = Ember.View.extend({
    tagName: 'div',        
    didInsertElement: function() {
        this.$().accordion();
    }
});​