为什么最新版本的 Forge 查看器会破坏我的 onClick 侦听器？

Question

总结

最新版本的 forge 查看器 (6.6.0) 在我的控制台中抛出一个 "unexpected token" 错误并且我的一些 $(button).on('click') 事件将不再在我的自定义面板中绑定（尽管有错误，请求的模型确实加载）

我试过的

我将查看器退回到 6.5.0 版并且我的代码可以正常工作，我还删除了除初始化逻辑之外的所有代码，但我仍然收到控制台错误。 我还尝试了所有我能想到的绑定事件的方法，并且 none 在最新的查看器版本中工作（$(document).on('click', 'myButton', this.onMyButtonClick)、$('#myButton).click(this.onMyButtonClick)、$('myButton').bind('click', this.onMyButtonClick)、$('myButton').on('click', this.onMyButtonClick) )

代码

查看器链接

<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/6.*/style.min.css" type="text/css">
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/6.*/viewer3D.min.js"></script>

初始化逻辑

const options = {
    env: `AutodeskProduction`,
    getAccessToken: getForgeToken
  };
  const documentId = `urn:${urn[`urn_string`]}`;

  Autodesk.Viewing.Initializer(options, function onInitialized() {
    Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
  });

  function onDocumentLoadSuccess(doc) {
      $(`.navbar-div`).css(`margin-bottom`,`10px`);
      const viewable = Autodesk.Viewing.Document.getSubItemsWithProperties(doc.getRootItem(), {
        'type': `geometry`,
        'role': `2d`
      }, true);
      if (viewable.length === 0) {
        return;
      }

      const initialViewable = viewable[0];
      const svfUrl = doc.getViewablePath(initialViewable);
      const modelOptions = {
        sharedPropertyDbPath: doc.getPropertyDbPath()
      };

      const viewerDiv = document.getElementById(`viewer`);
      viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerDiv);

      viewer.start(svfUrl, modelOptions, onLoadModelSuccess, onLoadModelError);
  }

点击中断事件

class MyExtension extends Autodesk.Viewing.Extension {
    constructor(viewer) {
      super();
      Autodesk.Viewing.Extension.call(this, viewer);
    }
    createPanel() {
      const Panel = new Autodesk.Viewing.UI.DockingPanel(NOP_VIEWER.container, `myPanel`, `Title`);
      $(Panel.container).append(*some html*);
      Panel.setVisible(true);
      $(`#myPanel`).find(`.docking-panel-close`).remove();
      $(`#myPanel`).find(`.docking-panel-title`).append(myButton);
      $(`#myButton`).click(this.onMyButtonClick.bind(this));
    }
    onMyButtonClick() {
        alert('here');
    }
  }

Autodesk.Viewing.theExtensionManager.registerExtension(`myExtension`, MyExtension);

错误和屏幕截图

控制台中的错误消息

SyntaxError: Unexpected token (
    at Object.E [as doOperation] (84a694cc-2244-4f8f-90ea-4d32694ed224:13)
    at t.value (84a694cc-2244-4f8f-90ea-4d32694ed224:13)
    at 84a694cc-2244-4f8f-90ea-4d32694ed224:13

Uncaught (in promise) {msg: "Error while importing 'userFunction'."}

带有按钮的面板 header

Answer 1

编辑： 现在使用标题面板中的按钮在主要浏览器上进行测试和工作 - 实时示例 here。会让工程部知道这是重大改变，但我怀疑他们不会阻止将控件放在那里

    class MyExtension extends Autodesk.Viewing.Extension {
    constructor(viewer) {
      super(viewer);
      this.createPanel()

    }
    createPanel() {
      const Panel = new Autodesk.Viewing.UI.DockingPanel(NOP_VIEWER.container, `myPanel`, `Title`);
      Panel.setVisible(true);
      $(`#myPanel`).height('100').offset({ top: 10, left: 30 }).find(`.docking-panel-close`).remove();
      $(`#myPanel`).append($('<button/>').text('Test').mousedown(this.onMyButtonClick.bind(this)))
    }
    onMyButtonClick(e) {
        e.stopPropagation();
        alert('here')
    }
  }