Problems rendering script tags in script tags with handlebars

Question

I want to render templates inside my application template. I'm using handlebars with ember.js. Right now I am using a simple {{render 'templateName'}} but this seems to mess up the html/css of the page. I tried using {{partial 'templateName'}} for rendering but my templates won't render at all.

To put it in a simple way, the div are messed up. What is the correct way to render handlebars template in handlebars templates?

Here is an example of what I am doing :

<script type="text/x-handlebars">
    **Some html**
    {{render 'conversations'}}
</script>

<script type="text/x-handlebars" data-template-name="conversations">   
{{#each conv in model }}
    {{#link-to 'conversation' conv}}  
        <div class="conversation-content-wrapper" {{action "click" conv}}>
                <div class="history-message-assigned in-progress-closed" style="display:none;"><p><i class="icon-x"></i>Conversation closed</p></div>
                <div class="history-message-assigned in-progress-assignation" style="display:none;"><p><i class="icon-assign"></i>Conversation assigned</p></div>
                <div class="history-message-assigned in-progress-reopen" style="display:none;"><p><i class="icon-re-opened"></i>Conversation re-opened</p></div>          
            <div class="conversation-history">          
                <div class="conversation-time-history">{{{conv.timeAgoElement}}}</div>
                <div class="conversation-details">
                    <span class="unread-numbers" data-badge="2"></span>
                        <input type="checkbox" name="conversations_ids[]" value="{{conv.id}}" />
                         <span class="conversation-name">{{conv.customer.name}}</span>
                         <span class="phone-number">{{conv.customer.cellPhoneNumber}}</span>
                        <p class="conversation-text">{{conv.lastMessage}}</p>
                </div>
            </div>                       
        </div>
    {{/link-to}}
{{/each}}     
</script>

Too vague. This page covers the details of render and partial. "Seems to mess up" and "won't render" are not clearly describing your problem. — Steve H.
Well then could you explain to me why using {{partial 'templateName'}} won't render anything? Ember doc is really stupidly bad, I read it all many many times and the example are purely too simple. — greenymaster69
I can't explain why nothing renders as you describe it. For example, an empty or null model object would render nothing. I also can't explain why "the div are messed up" without more information. I use {{partial}} often and it works as expected. — Steve H.

Deewendra Shrestha Deewendra Shrestha · Accepted Answer · 2015-05-29T17:12:13

I wouldn't call ember doc "stupidly bad", that's over exaggeration. There is a pretty decent description on render helper right here : http://guides.emberjs.com/v1.10.0/templates/rendering-with-helpers/

As for why your render is not working, its because you didn't provide proper model to the render helper. It instantiates a singleton conversations controller with no model so your loop is basically faulty.

Here is a simple demo: http://emberjs.jsbin.com/bobiwagove/1/

Problems rendering script tags in script tags with handlebars

1 Answers