在 render() 方法完成后执行操作答案

【问题标题】：Do action after render() method is completed在 render() 方法完成后执行操作
【发布时间】：2011-09-07 15:42:59
【问题描述】：

当render() 方法完成其工作并将所有 HTML 元素附加到 DOM 时，我需要执行一些操作。如何订阅onRenderEnds事件（没有这个事件）？我可以在 slickgrid 代码之外编写自己的事件并将其附加到 render() 方法吗？

有一些事件 "onScroll", "onViewportChanged" 但它们发生在 render() 完成之前（在某些情况下）。

更新：我为列编写格式化程序：

formatter: function(row, cell, value, columnDef, dataContext){
    return "<div class='operationList' data-my='" + myData + "'></div>";            
}

当网格渲染（应用我的格式化程序）时，我需要遍历所有 ".operationList" divs 并将它们转换为其他结构（基于 data-my 属性）。我需要用带有事件处理程序的复杂结构替换".operationList" divs。

【问题讨论】：

@Tin，查看我的问题更新。
@Tin：我有一个类似的问题，因为我想使用 jQuery.selectBox() 插件设置

标签： slickgrid

【解决方案1】：

为了回答我自己的评论，我想出了以下 hack。它可能不漂亮，但它似乎有效。

将以下行添加到 render() 方法中，就在 renderRows(rendered); 下方

function render() {
    ...
    renderRows(rendered);
    trigger(self.onRenderCompleted, {}); // fire when rendering is done
    ...
}

向公共 API 添加新的事件处理程序：

"onRenderCompleted":            new Slick.Event(),

绑定到代码中的新事件：

grid.onRenderCompleted.subscribe(function() {
    console.log('onRenderCompleted');
});

【讨论】：

您的解决方案非常好。只有一个缺点：需要进入库代码并对其进行编辑。如果你想更新 slickGrid 库会发生什么？您需要将代码复制到新的代码库中。这是不好的。正如你所说 - 一个“黑客”。但这是我所知道的最好的方式。现在。
你可以做的是在 github 上 fork 代码并维护你自己的更改。然后，当您想要更新代码时，您可以从主存储库中提取更改，并且您的更改应该会自动合并。
这个触发器(self.onRenderCompleted, {});真的应该在渲染方法的最后——因为渲染直到方法完成才完成。
顺便说一句：我不得不求助于这个解决方案，而且我的脚手架依赖于一个有点定制的 slickGrid。
当 [] 项被传递到网格时也会触发（所以没有数据）

【解决方案2】：

基本答案是不要！您提出的设计非常糟糕，违背了 SlickGrid 的核心原则和架构。

您最终会做大量多余的工作并否定 SlickGrid 的大部分性能优势。网格将在您滚动时动态创建和删除行 DOM 节点，并根据当时最适合的方式同步或异步执行此操作。如果您必须在单元格中拥有丰富的交互式内容，请使用自定义单元格渲染器并使用其提供的事件（例如 onClick）将所有事件处理委托给网格级别。如果单元格的内容绝对不能使用渲染器创建，请使用异步后渲染 - http://mleibman.github.com/SlickGrid/examples/example10-async-post-render.html。即使这样，网格内容也不应该有任何事件监听器直接注册到 DOM 节点。

为了解决@magiconair 的评论，在单元格切换到编辑模式之前，您真的不应该呈现整个 SELECT 及其所有选项和事件处理程序。

【讨论】：

这是一个有趣的方法。我没想到。