vendredi 26 juin 2015

Rendering hundreds of datas : lazy loading, partial rendering?

I can seem to find a good answer for my problem. I have a sidebar template which contains a div for each item my model contains. When I have hundreds of items to render, it takes up to 8-10 seconds to render the template. I am using ember-data.

How can I render the items that are loaded before it finishes fetching the entire model?

Here is my template :

{{#each conv in model itemController='singleconv'}}
        {{#if (equals conv.url selectedSubuserEmail)}}
            <div class="conversation-content-wrapper" {{action "clickConv" conv preventDefault=false}}>
                    <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={{conv.selectedClass}}>          
                    <div class="conversation-time-history">{{{conv.status}}}</div>
                    <div class="conversation-details">
                        <span class="unread-numbers"></span>
                            {{input type='checkbox' class='chk-conversation' checked=conv.isChecked}}
                             <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>
        {{/if}}
{{/each}}




Aucun commentaire:

Enregistrer un commentaire