1

我是 Blazor 的新手。有一个使用 gojs 库的 js 函数。画布，数据加载在js端动态处理。正如我所不明白的那样，仅在主机上添加 js 脚本是不够的，我必须使用 IJSRuntime。从示例中，我发现使用 return 等调用简单函数是可以理解的。但我有这个：

 function init() {
        if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
        var $ = go.GraphObject.make;  // for conciseness in defining templates
        myDiagram =
            $(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
                {
                    initialContentAlignment: go.Spot.Center,
                    allowDrop: true,  // must be true to accept drops from the Palette
                    "LinkDrawn": showLinkLabel,  // this DiagramEvent listener is defined below
                    "LinkRelinked": showLinkLabel,
                    "animationManager.duration": 800, // slightly longer than default (600ms) animation
                    "undoManager.isEnabled": true  // enable undo & redo
                });
        // when the document is modified, add a "*" to the title and enable the "Save" button
        myDiagram.addDiagramListener("Modified", function (e) {
            var button = document.getElementById("SaveButton");
            if (button) button.disabled = !myDiagram.isModified;
            var idx = document.title.indexOf("*");
            if (myDiagram.isModified) {
                if (idx < 0) document.title += "*";
            } else {
                if (idx >= 0) document.title = document.title.substr(0, idx);
            }
        });

        myPalette =
            $(go.Palette, "myPaletteDiv",  // must name or refer to the DIV HTML element
                {
                    "animationManager.duration": 800, // slightly longer than default (600ms) animation
                    nodeTemplateMap: myDiagram.nodeTemplateMap,  // share the templates used by myDiagram
                    model: new go.GraphLinksModel([  // specify the contents of the Palette
                        { category: "Start", text: "Start", figure: "Ellipse" },
                        { text: "Step" },
                        { text: "Check Trigger", figure: "Diamond" },
                        { category: "End", text: "End" }
                        //{ category: "Comment", text: "Comment" }
                    ])
                });
    }
}
function load() {
myDiagram.model = go.Model.fromJson(document.getElementById("jsonModel").value);

}

等等。因此，在初始化时，我的画布是动态构建的。

在组件方面我有：

<div onload="init()"></div> <span style="display: inline-block; vertical-align: top; padding: 5px; width:20%"> <div id="myPaletteDiv" style="border: solid 1px gray; height: 100%">

     ```   </div>```
  ```  </span>```

   ``` <span style="display: inline-block; vertical-align: top; padding: 5px; width:80%">```
       ``` <div id="myDiagramDiv" style="border: solid 1px gray; height: 100%"></div>```
    ```</span>```

<textarea style="display:inline-block" id="jsonModel"></textarea>

如何在 Blazor 中处理所有这些？试过了

[JSInvokable]
protected override Task OnAfterRenderAsync(bool firstRender = true)
{
    if (firstRender)
    {
        return jsRuntime.InvokeVoidAsync
            ("init").AsTask();
    }
    return Task.CompletedTask;
}

但它没有用。预先感谢您的任何帮助

4

1 回答 1

0

有一个完整的示例：https ://github.com/NorthwoodsSoftware/GoJS-Alongside-Blazor

它这样做：

    protected async override void OnAfterRender(bool firstRender)
    {
      if (firstRender)
      {
        // This calls the script in gojs-scripts.js
        await JSRuntime.InvokeAsync<string>("initGoJS");
      }
    }

唉，我不熟悉 Blazor，所以我无法回答有关它的任何问题。

于 2021-02-22T02:27:46.167 回答