在带有把手的脚本标签中呈现脚本标签时出现问题

时间:2015-05-28 13:38:18

标签: ember.js handlebars.js

我想在我的应用程序模板中呈现模板。我正在使用带有ember.js的把手。现在我正在使用一个简单的{{render'templateName'}}但这似乎弄乱了页面的html / css。我尝试使用{{partial'templateName'}}进行渲染,但我的模板根本不会渲染。

以简单的方式说,div搞砸了。在把手模板中渲染把手模板的正确方法是什么?

这是我正在做的一个例子:

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

1 个答案:

答案 0 :(得分:0)

我不会称ember doc“愚蠢糟糕”,这太夸张了。这里有关于渲染助手的相当不错的描述:http://guides.emberjs.com/v1.10.0/templates/rendering-with-helpers/

至于为什么渲染不起作用,因为你没有为渲染助手提供合适的模型。它实例化一个没有模型的单例对话控制器,因此你的循环基本上是错误的。

这是一个简单的演示:http://emberjs.jsbin.com/bobiwagove/1/