emberjs + gojs集成

问题描述

大家好，我正在尝试emberjs，并希望将goJS集成到它中。我对软件包https://www.npmjs.com/package/gojs进行了npm安装 但是我找不到关于此的任何好的文档..因此，如果有人可以指出我的错误，那将是很好的

import Component from "@glimmer/component";
import go from "gojs";
import { action } from "@ember/object";
import { tracked } from "@glimmer/tracking";

export default class GraphComponent extends Component {
  @tracked iconName = "check-circle";

  $ = go.GraphObject.make;
  myDiagram = $(go.Diagram,"myDiagramDiv");



  @action
  changeIcon() {
    if (this.iconName == "check-circle") {
      this.iconName = "sync-alt";
    } else {
      this.iconName = "check-circle";
    }
  }
}

这是我的炭烬组件graph.js，在graph.hbs中，我具有对应的div，但有些内容在屏幕上却没有显示。我错过了什么吗？

并希望通过emberJS docs.TY链接到goJS。

解决方法

我建议使用didInsert render modifier。

您可以这样做

<div id="myDiagramDiv" {{did-insert this.insertDiagram}}></div>

然后您可以执行将div插入DOM后运行的操作：

@action
insertDiagram() {
  const $ = go.GraphObject.make;
  const myDiagram = $(go.Diagram,"myDiagramDiv");
}

否则，您将在<div>可用之前运行此代码。