javascript - 如何避免在数据更改时完全刷新小部件？

Question

在 icCube Reporting V6 中，我基于 iccube 在 https://www.iccube.com/your-first-html-widget/ 的示例创建了一个模板小部件。 .这样做，我将所有 JS 代码放在 After render 事件中。

我想在小部件创建时定义和默认一些变量，这些变量可以在整个报告的使用过程中更改并用作此小部件中的参数。

问题是在每次数据更改时，小部件都会完全刷新和重建，同时将我的变量重置为默认值...

它是否缺少我们可以在其中初始化小部件和变量的 init widget 事件？那么 on Data Received 和 After render 事件的目的只是为了管理数据操作和渲染？ (关于这些变量)还是……我只是做错了？

Answer 1

每次我们获取新数据或小部件的属性之一发生变化时，都会调用渲染事件。最新的很少见，但如果某些属性已使用事件定义，则可能会出现。

我们需要在这个方法上添加一个状态来检查小部件是否已经被渲染。这可以通过两种方式完成，使用 jquery 检查 dom 是否已更改或添加 javascript 对象。

第一个使用 jquery 很容易，如果不需要缓存 javascript 对象，应该使用它。对于第二个，我们有两个解决方案:

1) 我们可以使用 jquery 将 javascript 对象绑定(bind)到 html 元素 (data):

  var state = $node.data("widgetState");
    if ( state ) {
        // it's not the first time
        state.times = state.times+1;
        $node.html("It's the " + state.times + " time you clicked " );
    }
    else
    {
        // it's the first time
        $node.html("It's the first time you clicked, don't be shy" );
        state = { times : 1 } ;
        $node.data("widgetState", state);
    }    

2) 从 icCube 6.0.4 开始，您还可以使用上下文来获取本地状态对象，context.widgetState()

您可以检查一个工作示例 here :