1

我有一个包含 100 多个项目列表的表格，每个项目都有 3 个下拉列表，其中包含 100 多个项目的列表。

当用户单击从 MVC 应用程序获取 json 数据的搜索按钮时，我正在使用以下方法动态激活绑定。

问题是 IE8 的渲染时间是 Chrome 渲染的 20 倍。

我在我的代码中遵循了以下 ko 提示：

  • 在底层数组上使用 valueHasMutated 以减少可观察到的命中
  • 使用需要显示的单个项目加载下拉列表，并且仅当用户将鼠标悬停在下拉列表中加载所需的所有项目 select
  • 正确处理 jqueryon事件

我必须以 IE8 为目标，因为它是一个 Intranet 应用程序并继续使用 KO，因为我的应用程序因 IE8 和 KO 性能而存在问题。

cshtml代码：

...在一个 html 表格中，我有下面的 td 用于显示下拉菜单。

           <td>
                <span data-bind="attr: { id: 'type-ddpl-holder-' + RowUniqueNo() }">
                <select data-ddpl-loaded="false" class="type-ddpl">                    
                    <option data-bind="html: TypeName() ? TypeName() : '--Please select--''" selected></option>
                </select>                    
                </span>                                        
            </td>

... RowUniqueNo()我需要将 select 替换为ko template具有唯一dom元素 id 的绑定。

目的是不使用 ko 选项绑定，使用 json 中的项目加载下拉列表，即仅包含一项的下拉列表。

下面的 ko 代码在 ajax 成功处理程序中，它呈现上面的模板。

     ko.applyBindingsToNode(document.getElementById('place-holder'),
                 { template: { name: 'def-edit-tmpl', data: vm} });
                    onDdpl();
                    var element = document.getElementById('place-holder');
                    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {                       
                        offDdpl();
                    });
  • onDdpl 函数将挂钩到on'hover' 事件的 jquery 事件，这将使用绑定替换初始绑定select控件与 ko 模板options绑定。
  • offDdpl 函数将用于处理on事件。

以下是on活动中使用的模板

<script type="text/html" id="type-ddpl-tmpl">
    <select class="fl tb120w" data-ddpl-loaded="true" data-bind="options: $parent.typeList, optionsText: 'Value', optionsValue:'Key', value:$data.TypeId">                
    </select>

对于使用这种方法渲染 100 个项目，IE8 需要 10 多秒，而 Chrome 需要不到一秒。在 10 多秒内，IE8 没有响应。非常感谢任何提高性能的帮助/提示。

4

0 回答 0