文章/答案/技术大牛

发布

社区首页 >问答首页 >渲染数百个数据:延迟加载，部分渲染？

问渲染数百个数据:延迟加载，部分渲染？
EN

Stack Overflow用户

提问于 2015-06-27 02:35:44

回答 1查看 334关注 0票数 1

我似乎能为我的问题找到一个好的答案。我有一个侧栏模板，其中包含了我的模型包含的每个项目的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}}

ember.js

ember-data

回答 1

Stack Overflow用户

发布于 2015-06-27 09:08:49

这是Ember渲染中的主要问题，Ember将你所有的绑定都连接到你创建的模型上，所以它在每个添加的模型上重新渲染视图，因此延迟。

我也遇到过同样的情况，这里有几个解决方案

1-使用Ember.ListView

您可以使用Ember list-view，这是一个Ember插件，可以将延迟呈现添加到项目列表中，如果您的项目可以以相同的高度(以像素为单位)显示，则非常有用。

2-使用灰尘遮盖

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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31079972

复制

相似问题

问渲染数百个数据:延迟加载，部分渲染？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问渲染数百个数据:延迟加载，部分渲染？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问渲染数百个数据:延迟加载，部分渲染？
EN