Ember JS - 提高选择视图的性能

Question

我有一个包含350-400 <option>元素列表的选择框。元素数据通过ajax加载。加载很好。

但是当我试图创建列表时。浏览器挂起高RAM，CPU使用最终无响应的脚本错误显示在浏览器中。给它足够的时间呈现。

似乎ember并没有真正缓存渲染的元素，因为每次我回到同一页面时问题都会重复。

那么，有什么方法可以提高视图select的性能吗？

选择视图的示例代码：

{{view "select" prompt="-- select --" content=controllers.application.companies
            optionValuePath="content.id" optionLabelPath="content.name_abbr"
            classNames="form-control" value=dailyId}}

我知道其中一个替代方案是使用文本框使用预先输入的脚本。但我现在想把它保存为B计划。

Answer 1

警告： 根据{{​​3}}博客条目

，此解决方案将从Ember 2.0开始弃用

  

<强>清除

     

  

• ...

  

• 在视图中手动将字符串渲染到缓冲区

  

我认为我没有给你答案，我没有回到这个原因，因为我找不到我已经做了一段时间的完整实施。它本质上是当前选择组件的副本，除了像我说的那样，我实现了render方法。像this这样的东西：

App.CustomSelectComponent = Em.Component.extend({

  tagName: 'select',

  optionValuePath: '',

  optionLabelPath: '',

  content: [],

  render: function(buffer) {
    var selfie = this,
        options = this.get('content'),
        idPath = this.get('optionValuePath'),
        valPath = this.get('optionLabelPath');

    options.forEach(function(option) {  
      buffer.push('<option value=\'' +  option[idPath.replace(/^content\.?/, '')] + '\'>');
      buffer.push(option[valPath.replace(/^content\.?/, '')]);
      buffer.push('</option>');
    });
  }
});

这是不以前的实现，如果你花几秒钟看一下它，你会发现这个解决方案存在一些问题，然而，{{ 1}}实现是你可能想要研究的内容。

随着实现的实施，我已经可以获得更好的性能。在jsbin上，我为render和示例自定义选择添加了一小组记录：

但同样，这种实现缺乏几个功能，可能还不足以回答这个问题。我刚刚在几分钟前做过这样的演示，你是否已开始在你的组件中实现Ember.Select以及如何实现。

很抱歉，如果这不是您想要的答案。