Question

我是EmberJS的新手并计划使用它来构建具有复杂UI设计的单页面应用程序，其中涉及用于搜索项目的多个选项卡。例如，导航的外观如下：

客户（标签）
- 订单1（标签）
  - 搜索1（标签）
  - 搜索2（标签）
  - ...
- 订单2
  - 搜索1（标签）
  - 搜索2（标签）
  - ...

最多可以有4个订单标签，每个订单标签最多可以包含4个搜索标签。每次搜索最多可以返回500条记录。

我担心的是，在所有选项卡同时打开的情况下（4x4 = 16个选项卡），浏览器需要处理大量数据，如果处理不当，可能会导致性能降低或内存泄漏。所以我的问题是： 1）在选项卡之间切换时（特别是最多可包含1000条记录的搜索选项卡），如何正确销毁未激活的选项卡的数据？ 2）如果我使用html显示1000条记录，Ember是否可以立即清空整个表容器的内容（来自DOM），或者我是否需要在迭代中执行空内容并一次只删除一行？我认为在迭代中删除非活动选项卡的数千条记录的内容将非常耗时并且会导致性能降低。 3）是否有使用此类导航方案使用Ember开发的网站？

非常感谢您提供任何指导。

Answer 1

只要您为每个标签使用单独的路线，它就可以正常工作。

每当您转换到新路线时，Ember会自动刷新视图，删除前一路线的DOM元素，然后为新路线渲染DOM元素。

至于记忆，你可以做这样的事情来清除记录：

App.SearchRoute = Ember.Route.extend({
     deactivate:function() {
         var items = this.store.all('item');
         items.forEach(function(item) {
              item.dematerializeRecord();
         )};
     };
});

只要用户离开路线，就会调用

Deactivate。 All获取当前存储在商店中的所有记录，而不从服务器加载更多。虽然，我不完全确定这会对浏览器内存产生什么影响。

我不确定会产生多大的影响。我的一个应用程序加载了数千条记录，最大的性能影响实际上是从服务器加载它们。一旦加载路线之间的转换通常非常顺利。

EmberJS复杂UI，具有多个选项卡和数据卸载

1 个答案: