Question

我似乎能为我的问题找到一个好的答案。我有一个侧边栏模板，其中包含我的模型包含的每个项目的div。当我有数百个要渲染的项目时，渲染模板最多需要8-10秒。我正在使用ember-data。

如何在完成获取整个模型之前渲染已加载的项目？

这是我的模板：

{{#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}}

Answer 1

这是ember渲染中的主要问题，随着时间的推移越来越好，Ember将所有绑定连接到您创建的模型，因此它会在每个添加的模型上重新渲染视图，从而延迟。

我一直处于相同的情况，你有几个解决方案

1-使用Ember.ListView

您可以使用Ember list-view这是一个Ember插件，可以将惰性渲染添加到项目列表中，如果您的项目可以以相同的高度（以像素为单位）显示，则非常有用。

2-使用Ember Cloaking

Ember Cloaking与list-view大致相同，但具有灵活的高度，但您仍需要在渲染之前计算它们。

3-使用waypoints

等可见性检查器

我自己做了这个，它有点乏味但插件免费

您在组件中创建一个变量，当它在航点中可见时设置为true。

示例代码，而不是真正的代码

export default Ember.Component.extend({
   visible:false,
   didInsertElement:function() {
      var waypoint = new Waypoint({
         element: this.$()[0],
         handler: function(direction) {
           this.set('visibile',true)
        }.bind(this)
      })
   }
})

然后将您的内容移动到此组件

然后在这个组件中：

{{#if visibile}}
   <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}}

然后是“for-each”块

{{#each conv in model itemController='singleconv'}}
    {{the-component conv=conv}}
{{/each}}

然后使用计数器或其他东西使前10个可见。

正如我所说，这只是一个简单的例子，你可以深入研究它。

渲染数百个数据：延迟加载，部分渲染？

1 个答案: