javascript - ZKOSS 无法处理 setAttr 无法调用 null 的方法 'set' (TypeError)

Question

我正在拉我的头发。

我有 ZK 网格，然后在网格内还有另一个网格。两者都绑定(bind)到单独的 View 模型。

将其视为社交网络墙。

外部网格是一个渲染帖子的 ViewModel。然后，对于每个帖子，都会使用一个内部网格，该网格绑定(bind)到另一个 ViewModel 来呈现评论。

好的，问题是“无法处理 setAttr 无法调用 null 的方法“set”(TypeError)”

如何调试此错误。根本没有服务器端错误。顺便说一句，代码工作正常，但我时不时地开始收到此错误。

我使用的是ZK 6.5.1.1最新版本。

注意:我知道如果没有代码，分析问题会更困难。但对我来说发布一部分工作或有用的代码片段并不是太简单。因此，如果有人知道如何调试这个可怕的消息，我将不胜感激。 我还看到其他类型的类似消息:无法安装:无法调用 null 的 ReplaceWidget 等。

谢谢

Answer 1

关于调试此类问题，您可以尝试如下操作:

.1。打开 Debug模式(参见引用)

zk.xml

<zk>
    <client-config>
        <debug-js>true</debug-js>
    </client-config>
    <library-property>
        <name>org.zkoss.web.classWebResource.cache</name>
        <value>false</value>
    </library-property>
</zk>

.2。尝试重现这个问题，这里我创建了一个示例，通过手动取消绑定(bind)组件来重现类似的问题，如下所示(单击“测试”按钮查看类似的错误)

test.zul

<zk>
    <textbox id="tbx" />
    <button label="test">
        <attribute name="onClick"><![CDATA[
            String uuid = tbx.getUuid();
            Clients.evalJavaScript("zk.Widget.$('$tbx').unbind();");
            tbx.setValue("abc");
        ]]></attribute>
    </button>
</zk>

.3。在 chrome 开发者工具中查看错误消息，然后单击源链接:

.4。左键单击 setAttr 下的第一行添加断点。

.5。刷新页面，再次点击“test”按钮，可以看到右侧的“wgt”为空，wgt通常表示一个widget(客户端的组件)。

.6。现在我们知道一个widget变成null，然后ZK执行它的setAttr命令，为了调试这个，我们可以简单地在调用bind_时记录每个uuid和className(bind_是一个widget生命周期的函数，基本上实例化所有dom元素一个小部件)通过客户端编程，并在单击按钮时再次记录所有小部件。

例如，

test.zul(已更新)

<zk>
    <script><![CDATA[
        var allUuids = [];
        zk.afterLoad("zul", function () {
            var _wgt = {};
            // override zk.Widget,
            // basically zk.Widget is the
            // root of all widget classes
            zk.override(zk.Widget.prototype, _wgt, {
                bind_: function (a, b, c) {
                    // call original function
                    _wgt.bind_.apply(this, arguments);

                    // each widget has a uuid and className
                    allUuids.push({uuid: this.uuid, ele: this.className});
                }
            });
        });
        function showAllUuids () {
            var info,
                wgt;
            for (var i = 0; i < allUuids.length; i++) {
                info = allUuids[i];
                // get widget by uuid
                wgt = zk.Widget.$('#'+info.uuid);
                // show the old className and current status
                // you can also try record some more information as needed
                // e.g., parent, previousSibling, sclass, etc
                zk.log(info.uuid + ' was ' + info.ele + ' now ' + (wgt? wgt.className : wgt));
            }
        }
    ]]></script>
    <textbox id="tbx" />
    <button label="test">
        <attribute name="onClick"><![CDATA[
            String uuid = tbx.getUuid();
            Clients.evalJavaScript("zk.Widget.$('$tbx').unbind();");
            tbx.setValue("abc");
            Clients.evalJavaScript("showAllUuids();");
        ]]></attribute>
    </button>
</zk>

.7。现在，单击“测试”按钮后，我们将收到下面的日志消息，其中包含更新的 zul 页面，并让我们知道客户端的文本框小部件变为空，您还可以在 Chrome 开发者工具的 Network 中检查响应值。

希望这有帮助

引用文献:

ZK Client Side Programming

Open the debug mode

bind_ in zk.Widget