emberjs + gojs集成

Question

嘿，伙计们，我正在尝试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";
    }
  }
}

这是我的ember组件graph.js，在graph.hbs中我有相应的div，但有些东西什么都没有显示在屏幕上。我是不是漏掉了什么？

如果您有任何指向带有emberJS docs.TY的goJS的链接，我将不胜感激

Answer 1

我建议使用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>可用之前运行此代码。